iOS 9 和 El Capitan 搞砸了 CSS

Question

由于 Apple 最近更新了桌面版 El Capitan 和移动版 iOS 9，我们网站的 css 显示一直无法正常工作。我附上两个屏幕截图。第一个是全屏 - 不仅 css 被忽略，照片内容也不显示。第二个是一个最小化的屏幕，它为响应式设计部署了我们的@media 查询。我们的代码在更新之前适用于 OSX 和 iOS，并且适用于所有其他平台。

这是桌面截图：

手机截图如下：

修复上述代码中的 Safari 错误后，我仍然遇到问题 - css 无法在 kuttlefish.com 上正确呈现（因为 ios9 和 El Capitan Mac 更新） .我发现的一个行为可能会提供洞察力：在 603px 以下，页面上的照片突然出现。超过 603px，照片不显示。我将我的 @603 媒体 css 粘贴到这里，以供可能有想法的任何人使用。发送.

@media only screen and (max-width: 603px) {

#contact-form{width:95%;}

.box {width:47.6%;float:left;position:static !important;margin:5% 1% 0 1%;}
.box .preview .thumb{width:100%;height:321px;}
.big-box {width:97.6%;}
.big-box .preview .thumb{width:100%;height:743px;}
.box .idata .description{width:100%;}

.fancybox-wrap{width:96.5% !important;}

#categorieswrapper{height:110px;}

} ~

Answer 1

您的捆绑 CSS 中存在一些错误。 Chrome（其他浏览器对语法错误更加宽容）。

查看 Safari 开发人员工具 (here are instructions on how to enable it)，您将在控制台中看到错误。您的 CSS 中存在一些语法错误，这里是一个示例：

在上面你注意到边框前的星号属性，那是无效的 CSS。正如其他用户所指出的，还有其他一些，请参阅评论。

但是这里列出的太多了，您需要全部修复它们才能使网站正确呈现：

iOS 9 和 El Capitan 搞砸了 CSS

iOS 9 and El Capitan messing up CSS

javascript

css

iphone

safari

ios