CSS 相邻兄弟选择器、Safari 和 <nav> 元素答案

【问题标题】：CSS adjacent sibling selectors, Safari and <nav> elementsCSS 相邻兄弟选择器、Safari 和 <nav> 元素
【发布时间】：2012-03-08 06:37:05
【问题描述】：

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

这令人沮丧，因为我的 Rails 资产打包程序正在缩小 CSS 并去除不必要的空间。这对 IE7、Firefox、Chrome 或 Opera 来说不是问题 - 但 Safari 5..

其他人有类似的吗？知道为什么？知道解决方法吗？

【问题讨论】：

【解决方案1】：

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

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

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

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

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

【讨论】：

幸运的是，我可以建议使用~，前提是你提到它在 IE7 中不是问题，你只是在为 IE7 及更高版本开发，它同时支持+ 和 ~（你可能没有在 IE6 中测试，因为它不支持任何一个组合器）。