CSS邻近兄弟选择器，Safari和<nav>元素

Question

在Safari 5.1.3中，我刚刚注意到，当编写CSS邻近兄弟选择器（呃+一个）并引用一个<nav>元素时 - 浏览器无法兑现CSS。

所以：

h1 + p { ... } /* works fine */
h1+p { ... } /* works fine */

和

h1 + nav { ... } /* works fine */
h1+nav { ... } /* but, does NOT work */

我用其他html 5元素（部分，文章，旁边）测试了这些，它们似乎工作正常。 直到你把一个导航元素放入混合; 然后就打破了。 这是一个jsfiddle 。

这令人沮丧，因为我的铁路资产包装商正在缩小css并取出不必要的空间。 这不是IE7，Firefox，Chrome或Opera的问题 - 但Safari 5 ..

其他人有类似的吗？ 知道为什么？ 知道一种修复方法吗？

Answer 1

这绝对是一个Safari bug，您应该使用Safari> Report Bugs向Apple报告它...在Mac上或帮助>向 PC 报告错误...在PC上（或工具栏按钮，如果它显示在Safari工具栏上） 。

如果Asset Packager有一个选项，最简单的方法是禁用CSS缩小。

如果它没有这样的选项，则存在一个快速而肮脏的解决方法：如果你只有一个nav元素直接跟随你的h1 ，你可以使用一般的兄弟选择器~而不是因为Safari似乎没有任何问题它：

h1 ~ nav { ... } /* works fine */
h1~nav { ... } /* works fine */

jsFiddle预览

如果您的h1后面有多个nav元素，则必须使用h1 ~ nav ~ nav为后续nav元素手动覆盖样式。