我已经编写了一些 CSS,它们使用 parent > child 选择器来定位元素。专门针对表格,所以我可以像这样将某些样式应用于页眉和页脚
table > thead > tr > th ...
table > tbody > tr > td ...
//there are other uses in the css as well
这很好用,除了在 IE6 中。分解这个 CSS 以支持 IE6 的最佳方法是什么?
我已经编写了一些 CSS,它们使用 parent > child 选择器来定位元素。专门针对表格,所以我可以像这样将某些样式应用于页眉和页脚
table > thead > tr > th ...
table > tbody > tr > td ...
//there are other uses in the css as well
这很好用,除了在 IE6 中。分解这个 CSS 以支持 IE6 的最佳方法是什么?
如果我想选择 E > F,我使用
E F {
set-some-style: value;
}
E * F {
unset-some-style: 0;
}
只是,当您有很多 > 选择器时,它的效果并不好。
更多阅读: http ://www.sitepoint.com/blogs/2005/06/20/erics-universal-child-selector/
通常您只需删除“>”即可。这取决于您的 CSS 和 HTML 是如何编写的。我会试一试。
IE6 不支持>
选择器。
在某些情况下,您可以将其替换为空格选择器并获得大致相同的结果,但这并不总是有效;有时您只需要.>
我的第一个建议是放弃对 IE6 的支持。在过去的几年里,它几乎失去了所有剩余的市场份额,所以真的没有必要支持它。
如果你必须支持 IE6,并且你想使用>
选择器,那么你唯一的选择就是 Javascript hacks。
有两个技巧可以帮助你:
Dean Edwards 的 IE7.js - 这是尝试使用 Javascript 将尽可能多的 CSS 和 JS 功能反向移植到旧版本的 IE 中,包括 IE6。它做得相当好,并且已经存在了很长时间。
Selectivizr - 这是一个 JS 库,旨在为旧版本的 IE 提供对现代 CSS 选择器的全面支持。它还要求您使用另一个库,例如 jQuery,因为它从该库挂钩到选择器引擎。这意味着如果您已经在使用其中一个受支持的库,那么它是对您的代码的一个小而有效的补充。
你可以使用 JavaScript 来定位它们,但这几乎不是一个真正的解决方案,因为它需要 JavaScript 来完成应该由 CSS 完成的事情。您还可以修改您的 HTML 以具有特定的类,但这意味着修改您的 HTML。我真的不认为有任何“好”的解决方案,如果是我必须处理这个问题,或者如果我有权访问 HTML 或 HTML 创建脚本使用类,我可能会使用 JavaScript 将它们全部破解那些特定的孩子。