[英]CSS adjacent sibling selectors, Safari and <nav> elements
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. 在Safari 5.1.3中,我刚刚注意到,当编写CSS邻近兄弟选择器(呃
+
一个)并引用一个<nav>
元素时 - 浏览器无法兑现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. 我用其他html 5元素(部分,文章,旁边)测试了这些,它们似乎工作正常。 Until you put a nav element into the mix;
直到你把一个导航元素放入混合; then it breaks.
然后就打破了。 Here is a jsfiddle .
这是一个jsfiddle 。
This is proving frustrating as my rails asset packer is minifying the css and taking out unnecessary spaces. 这令人沮丧,因为我的铁路资产包装商正在缩小css并取出不必要的空间。 This isn't an issue for IE7, Firefox, Chrome or Opera - but Safari 5..
这不是IE7,Firefox,Chrome或Opera的问题 - 但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). 这绝对是一个Safari bug,您应该使用Safari> Report Bugs向Apple报告它...在Mac上或帮助>向 PC 报告错误...在PC上(或工具栏按钮,如果它显示在Safari工具栏上) 。
The easiest way out of this is to disable CSS minification if Asset Packager has an option for it. 如果Asset Packager有一个选项,最简单的方法是禁用CSS缩小。
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: 如果它没有这样的选项,则存在一个快速而肮脏的解决方法:如果你只有一个
nav
元素直接跟随你的h1
,你可以使用一般的兄弟选择器~
而不是因为Safari似乎没有任何问题它:
h1 ~ nav { ... } /* works fine */
h1~nav { ... } /* works fine */
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
. 如果您的
h1
后面有多个nav
元素,则必须使用h1 ~ nav ~ nav
为后续nav
元素手动覆盖样式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.