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;  }

即使在纵向视图中加载页面，它也会在右侧显示边框！我可以将border属性设置为纵向视图来覆盖它，但有什么方法可以使Safari 不在纵向上应用横向css吗？

Answer 1

...只需添加纵向视图：

myClass {position：relative; border-right：0}

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