由于 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;}
} ~
最佳答案
您的捆绑 CSS 中有一些错误。 Chrome(和其他浏览器对语法错误要宽容得多)。
查看 Safari 开发人员工具 (here are instructions on how to enable it)，您将在控制台中看到错误。您的 CSS 中存在一些语法错误，以下是一个示例:
在上面你注意到 border 属性前的星号，那是无效的 CSS。正如其他用户所指出的，还有其他一些，请参阅评论。
但是这里有太多无法列出的问题，您需要全部修复它们才能使网站正确呈现:
关于javascript - iOS 9 和 El Capitan 搞乱了 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33331369/