Html Safari 9(在iOS9中)忽略CSS设置
我正在处理此网页: 它是一种响应性很强的HTML,适用于所有浏览器、所有窗口大小。在iOS9问世之前,它在iphone上也能正常工作。现在整个网站都被破坏了。增加了额外的边距(我猜是这样),这意味着所有的框都有大量的空白。下面是我的iPad屏幕截图 我将视口设置为Html Safari 9(在iOS9中)忽略CSS设置,html,css,iphone,responsive-design,ios9,Html,Css,Iphone,Responsive Design,Ios9,我正在处理此网页: 它是一种响应性很强的HTML,适用于所有浏览器、所有窗口大小。在iOS9问世之前,它在iphone上也能正常工作。现在整个网站都被破坏了。增加了额外的边距(我猜是这样),这意味着所有的框都有大量的空白。下面是我的iPad屏幕截图 我将视口设置为 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 我尝试将边距设置为0,甚至设置为负值,
<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附加此文件:
但是,大多数样式仍然被忽略,特别是与页边距有关的样式。例如,iOS9样式表实际上应该将整个站点向左对齐(.centeredWrapper的边距为0,而不是自动边距)。我知道iPhone/iPad附带了iOS9.css,例如,与桌面版本相比,顶部菜单中的一些边距和颜色已成功更改
有人知道发生了什么事吗?我如何告诉Safari不要再试图变得聪明?或者我应该如何更改我的标记?主文第281行(或98行)似乎是罪魁祸首:
.content ul, .content ol, :not(.content ul.slideshowUl) { margin: 0 0 10px 30px;}
我在Safari inspector中对此进行了注释,整个页面恢复正常。尝试添加一个收缩以适合您的视口标记
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
也可以在Safari的电脑上查看。看起来是一样的,可能更容易调试!我在Safari中看到很多“无效CSS属性声明”警告,它们似乎都与两个样式表中的*属性选择器有关。我不知道这是否与此有关。是的,自从桌面safari升级到9.0后,它也有同样的问题。CSS验证肯定有问题,如下所示。谢谢谢谢,你是对的,你认为新的Safari不喜欢:not语句吗?事实上,由于语句中有逗号,:not选择器似乎正在选择页面上没有“.content ul.slideshowUL”类的所有内容。换句话说,对于我认为它试图实现的目标来说,这不是正确的语法。但这并不能解释为什么Safari是唯一一个显示此问题的工具!事实上,iOS9上的Chrome应用程序也有同样的问题。我认为这与苹果在SDK级别上实现的新渲染算法有关。