iOS Safari 在应用纵向之前首先应用横向 CSS - 如何阻止它？

Question

我有两个媒体查询:

<link rel="stylesheet" media="only screen and (orientation: landscape)" href="/stylesheet/landscape.css" />
<link rel="stylesheet" media="only screen and (orientation: portrait)" href="/stylesheet/portrait.css" />

在第一个中，其中一个类具有第二个中没有的属性:

/* This is how it is in landscape */
.myClass { position: relative; border-right: 1em solid red; }


/* This is how it is in portrait */
.myClass { position: relative;  }

即使以纵向 View 加载页面，它也会在右侧显示边框!我可以将 border 属性置于纵向 View 中以覆盖它，但是有什么方法可以使 Safari 在纵向 View 中不应用横向 css？

Answer 1

...只需在纵向 View 中添加:

myClass { position:relative；右边框:0

编辑:解释:发生这种情况是因为两个文件都被加载并且所有属性都应用在同一个类中。该位置被第二个文件中的同名类覆盖，但没有覆盖 border-right 属性。