忽略 CSS 规则答案

【问题标题】：Css rules ignored忽略 CSS 规则
【发布时间】：2016-02-03 20:29:41
【问题描述】：

自从升级到 iOS 9 后，我的 Web 应用程序的行为发生了变化，现在显示所有 css 样式 display: none 和 visibility: hidden 的内容。在 Safari 和 iOS 版 Chrome 中都可以看到此“功能”。在 Windows 和 Android 手机上的 Chrome、Firefox、Safari 和 IE 中隐藏了相同的内容（如预期的那样）。该问题似乎与 iOS 有关，但我找不到任何相关信息。

我知道 iOS 9 存在媒体查询错误（描述为 here 和 here），但我对页面的响应能力和缩放都没有问题。

另外值得注意的是，我正在使用 Twitter Bootstrap 3，特别是它们的隐藏类在 iOS 中无法正常工作。

<div class="hidden">Hide me please</div>

为什么内容没有隐藏？

更新

我制作了一个fiddle 进行测试。它包含两个隐藏对象，但在这个简化版本中，只有一个失败。我预计两者都会像我的真实场景一样失败，但你无法得到你想要的一切；）

【问题讨论】：

你能创建一个小提琴或添加一个代码 sn-p 来重现你遇到的问题吗？？
@wf4 当然，我已将其添加到问题中
hidden-xs 表示仅在小型设备（hidden-md 才能将其隐藏在您的设备上？我没有 iOS9 来测试我的理论，但你可以测试一下。如果这不起作用，有many other hide/show classes available
@turbopipp 是的，我确定。我还用hidden 进行了测试，同样的错误也适用于该场景。
this link 可能会帮助您。如果一切都失败了，使用 opacity: 0 和 position:absolute 切换？ :)

标签： css web-applications twitter-bootstrap-3 ios9 iphone-standalone-web-app

【解决方案1】：

我猜这与经常报告的有关 IOS9 的错误有关，可能看起来 Safari 没有正确考虑媒体查询。

可能的解决方法是在meta viewport 中修复或添加这些值：

initial-scale=1.0001
minimum-scale=1.0001
maximum-scale=1.0001
user-scalable=no

不要在元视口中设置页面宽度！这只会导致更多问题。

总而言之：

<meta name="viewport" content="initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no"/>

如果可行，您可以设置一个 javascript 来为 IOS9 webkit 添加特定的meta viewport。

【讨论】：

这解决了媒体查询的错误，但不是我正在努力解决的错误：/

【解决方案2】：

这个问题是很久以前提出的，遗憾的是我不记得确切的解决方案。我不得不离开这个项目并在几个月后重新开始。

我记得它与我项目中 Bootstrap 3 的一些奇怪行为有关，因此没有 iOS 错误。我将更改问题的标题以更好地反映这一点。

【讨论】：