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

时间:2012-02-16 20:21:57

标签: html css html5 safari css-selectors

在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 ..

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

1 个答案:

答案 0 :(得分:6)

这绝对是一个Safari错误,你应该使用 Safari&gt;报告它。在Mac上向Apple报告错误... 帮助&gt;在PC上报告错误... (如果它显示在Safari工具栏上,则显示工具栏按钮)。

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

如果没有这样的选项,则存在快速而肮脏的解决方法:如果您的nav后面只有一个h1元素,则可以使用general sibling selector ~相反,因为Safari似乎没有任何问题:

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

jsFiddle preview

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