Safari问题 - 网站部分损坏/不读取CSS

Question

我在Safari中遇到了我的网站问题。它在Chrome和Firefox中看起来很不错，但它在Safari中相当破碎。它似乎在阅读CSS时遇到问题 - 在某些元素上使用Safari Develop工具后，它表示没有属性，即使在查看开发工具中的主要css文件时，属性也存在。

我无法弄清楚为什么这只发生在某些元素上，而且只发生在Safari中。

非常感谢任何帮助。

屏幕截图：Chrome与Safari

Answer 1

想出来。 Safari控制台实际上是在抛出一个CSS错误（虽然模糊错误）。

在layout.css中的每个关键帧动画的末尾都有一个多余的逗号（第163行）。不确定为什么CSS验证器没有提到这一点。在媒体查询部分嵌套花括号之前，问题确实没有成为问题。不知何故，错误从媒体查询上方泄漏到页脚并将其丢弃......

所有其他可能偶然发现这个帖子的人......道德是不要在关键帧声明的末尾放置尾随的分号。

WAS

@-moz-keyframes photoshop { 0% { width: 0px; } 100% { width: 80%; } ; }
@-moz-keyframes htmlcss { 0% { width: 0px; } 100% { width: 70%; } ; }
@-moz-keyframes premiere { 0% { width: 0px; } 100% { width: 65%; } ; }
@-moz-keyframes afx { 0% { width: 0px; } 100% { width: 55%; } ; }
@-moz-keyframes illustrator { 0% { width: 0px; } 100% { width: 55%; } ; }
@-moz-keyframes jquery { 0% { width: 0px; } 100% { width: 45%; } ; }
@-webkit-keyframes photoshop { 0% { width: 0px; } 100% { width: 80%; } ; }
@-webkit-keyframes htmlcss { 0% { width: 0px; } 100% { width: 70%; } ; }
@-webkit-keyframes premiere { 0% { width: 0px; } 100% { width: 65%; } ; }
@-webkit-keyframes afx { 0% { width: 0px; } 100% { width: 55%; } ; }
@-webkit-keyframes illustrator { 0% { width: 0px; } 100% { width: 55%; } ; }
@-webkit-keyframes jquery { 0% { width: 0px; } 100% { width: 45%; } ; }

固定

@-moz-keyframes photoshop { 0% { width: 0px; } 100% { width: 80%; } }
@-moz-keyframes htmlcss { 0% { width: 0px; } 100% { width: 70%; } }
@-moz-keyframes premiere { 0% { width: 0px; } 100% { width: 65%; } }
@-moz-keyframes afx { 0% { width: 0px; } 100% { width: 55%; } }
@-moz-keyframes illustrator { 0% { width: 0px; } 100% { width: 55%; } }
@-moz-keyframes jquery { 0% { width: 0px; } 100% { width: 45%; } }
@-webkit-keyframes photoshop { 0% { width: 0px; } 100% { width: 80%; } }
@-webkit-keyframes htmlcss { 0% { width: 0px; } 100% { width: 70%; } }
@-webkit-keyframes premiere { 0% { width: 0px; } 100% { width: 65%; } }
@-webkit-keyframes afx { 0% { width: 0px; } 100% { width: 55%; } }
@-webkit-keyframes illustrator { 0% { width: 0px; } 100% { width: 55%; } }
@-webkit-keyframes jquery { 0% { width: 0px; } 100% { width: 45%; } }