Safari 9（在 iOS9 中）忽略 CSS 设置

Posted 2023-03-06

【中文标题】Safari 9（在 iOS9 中）忽略 CSS 设置

【英文标题】：Safari 9 (in iOS9) ignores CSS settings

【发布时间】：2015-12-23 07:10:33

【问题描述】：

我正在处理这个网页：http://dev.mailagent.biz/cms/NEWS

它是响应式 html，适用于所有浏览器、所有窗口大小。它曾经在 iPhone 上也能正常工作，直到 ios9 出现。现在整个网站都坏了。添加了额外的边距（我猜），这意味着所有框似乎都有很多空白。下面是我 iPad 上的截图。

我将视口设置为

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

我尝试将边距设置为 0，甚至设置为负值，但框不会移动。我还尝试删除 div 标签之间的任何空格，没有任何变化。

我正在为所有浏览器使用响应式 css：dev.mailagent.biz/cms/css/main_responsive.css 然后附上这个专门针对iOS9的：http://dev.mailagent.biz/cms/css/iOS9.css

但是，大多数样式仍然被忽略，尤其是与边距有关的样式。例如。 iOS9 样式表实际上应该将整个站点向左对齐（.centeredWrapper 的边距：0 而不是边距：自动）。我知道 iOS9.css 是为 iPhone/iPad 附加的，例如与桌面版本相比，顶部菜单中的一些边距和颜色已成功更改。

有人知道发生了什么吗？如何告诉 Safari 停止尝试变得聪明？或者我应该如何更改我的标记？

【问题讨论】：

也可以在电脑上的 Safari 中查看。在那里看起来一样，可能更容易调试！

我在 Safari 中看到很多“无效的 CSS 属性声明”警告，这些警告似乎都与两个样式表中的 *property 选择器有关。不知道跟这个有没有关系。

是的，自从桌面 safari 升级到 9.0 后，它也有同样的问题。 CSS验证肯定存在问题，如下面的答案所示。谢谢！

【参考方案1】：

尝试为您的视口标签添加收缩以适应

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

【参考方案2】：

main_responsive 中的第 281 行（或第 98 行）似乎是罪魁祸首：

.content ul, .content ol, :not(.content ul.slideshowUl)  margin: 0 0 10px 30px;

我在 Safari 检查器中将其注释掉，整个页面恢复正常。

【讨论】：

谢谢，你是对的，你认为新的 Safari 不喜欢 :not 语句吗？

实际上，使用语句中的逗号，:not 选择器似乎选择了页面上没有“.content ul.slideshowUL”类的所有内容。换句话说，这不是我认为它试图完成的正确语法。

但这并不能解释为什么 Safari 是唯一显示问题的！

其实iOS9上的Chrome应用也有同样的问题。我认为这与 Apple 在其 SDK 级别实现的新渲染算法有关。