html - Safari 问题 - 网站的某些部分已损坏/无法读取 CSS

Question

我的网站在 Safari 中遇到问题。它在 Chrome 和 Firefox 中看起来不错，但在 Safari 中却相当糟糕。读取 CSS 似乎有问题 - 在某些元素上使用 Safari Develop 工具后，它说没有属性，即使在 Develop 工具中查看主 css 文件时属性在那里。

我不明白为什么这只发生在某些元素上并且只发生在 Safari 中。

如有任何帮助，我们将不胜感激。

屏幕截图:Chrome 与 Safari

Answer 1

想通了。 Safari 控制台实际上抛出一个 CSS 错误(虽然是模糊的错误)。

layout.css(第 163 行左右)中每个关键帧动画的末尾都有一个多余的逗号。不确定为什么 CSS 验证器没有选择它。直到您在媒体查询部分嵌套了花括号，这个问题才真正成为问题。不知何故，错误从媒体查询上方渗入到页脚并将其丢弃......

所有其他可能偶然发现这篇文章的人...寓意是不要在关键帧声明的末尾放置分号。

是

@-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%; } }