CSS相邻兄弟选择器，Safari和< nav>元素 [英] CSS adjacent sibling selectors, Safari and <nav> elements

问题描述

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

所以：

  h1 + p {...} / *工作正常* / 
 h1 + p {...} / *工作正常* / 
  

和

  h1 + nav {...} / *工作正常* / 
 h1 + nav {...} / *但不工作* / 
  

我已经测试过这些与其他html 5元素（节，文章，旁白），他们似乎工作正常。直到你把一个nav元素放入混合;然后它打破。这是 jsfiddle 。

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

任何人都有类似？知道为什么？

解决方案

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

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

有这样一个选项，存在一个快速和脏的解决方法：如果你只有一个 nav 元素直接跟随你的 h1 ，则可以使用一般同级选择器〜 ，而Safari看起来没有任何问题：

  h1〜 nav {...} / *工作正常* / 
 h1〜nav {...} / *工作正常* / 
  

jsFiddle预览

如果您在 h1 后面有多个 nav 元素，则必须手动覆盖样式对于使用 h1〜nav〜nav 的连续 nav 元素。

In Safari 5.1.3 I have just noticed that, when writing a CSS adjacent sibling selector (er the + one) and when referencing a <nav> element - the browser fails to honor the CSS.

So:

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

and

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

I've tested these with other html 5 elements (section, article, aside) and they seem to work fine. Until you put a nav element into the mix; then it breaks. Here is a jsfiddle.

This is proving frustrating as my rails asset packer is minifying the css and taking out unnecessary spaces. This isn't an issue for IE7, Firefox, Chrome or Opera - but Safari 5..

Anyone else had similar? Know why? Know a way to fix?

解决方案

This is definitely a Safari bug and you should report it using Safari > Report Bugs to Apple... on a Mac or Help > Report Bugs to Apple... on a PC (or the toolbar button if it's displayed on your Safari toolbar).

The easiest way out of this is to disable CSS minification if Asset Packager has an option for it.

If it doesn't have such an option, there exists a quick and dirty workaround: if you only have one nav element directly following your h1, you can use the general sibling selector ~ instead as Safari doesn't appear to have any problems with it:

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

jsFiddle preview

If you have multiple nav elements following your h1, you'll have to override the styles manually for the successive nav elements using h1 ~ nav ~ nav.

这篇关于CSS相邻兄弟选择器，Safari和< nav>元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！