9

由于 IE6 不支持子选择器（请参阅http://kimblim.dk/csstest/#ex1），处理此浏览器时有什么替代方法？

我不想修改标记，而且我更喜欢纯 CSS 的解决方案......

是的，这是我希望针对的直接孩子。

谢谢！

4

8 回答 8

9

我遇到了一些黑客攻击： http: //meyerweb.com/eric/thoughts/2005/05/31/universal-child-replacement/结合使用 IE（6 及以下） 的“ star html ”黑客攻击这样我就可以选择直接孩子。假设我们想对 E 的直接子 F 应用 10px 的 padding-top：

* html body E F
{
    /* apply style here for IE 6 */
    padding-top: 10px;
    /* This applies the style to every F inside of E */
}
* html body E * F
{
    /* undo style here */
    padding-top: 0px;
    /* This will undo the style set above for every F that has something in between itself and E, that is, every F besides the direct children of E */
}

到目前为止，我非常感谢您的回答，但尽管我讨厌接受自己的回答，但这是我最终确定的解决方案。多谢你们！

于 2009-01-12T21:14:45.597 回答
4

您可以使用 jQuery，这不是一个很好的解决方案，但它是我过去使用的一个选项：

$("parent > child").each(function() {
    $(this).addClass("child-styles");
}

您显然希望将其包装在一些专门的 IE6 仅检查中。并且可能需要一个包含在 IE6 IF 语句中的样式表来添加这些专门的样式。

于 2009-01-12T19:38:41.313 回答
1

这是我在一本书中找到的一个很好的解决方案：“The Anthology of Javascript”

像这样的东西：

/* for all but IE */
#nav ul li.currentpage > a:hover {
  background-color: #eff;
}

以及迎合 IE 的代码：

/* for IE */
* html #nav ul li.currentpage a:hover {
  background-color: expression(/currentpage/.test(this.parentNode.className)? "#eff" : "#ef0");
}

IE 的 hack 是只有 IE 认为在 html 上有一个包装器，并且 IE 确实支持 expression() 的东西。

该表达式使用正则表达式 (/currentpage/)，并针对父节点的类对其进行测试，因此元素 li.currentpage 的直接子节点将设置为 #eff，其他后代将设置为 #ef0。

请注意，使用的颜色是假的，请不要评论它们;-)

于 2009-10-20T08:48:19.740 回答
1

这篇文章讨论了在 IE6 中模拟 CSS 子选择器的所有不同选项，包括最后使用嵌套结构的一个小技巧：http: //craftycode.wordpress.com/2010/05/19/emulating-css-child -ie6中的选择器/

于 2010-05-19T18:17:31.380 回答
0

需要直子吗？IE6 支持后代选择器，例如

div span { ... }

也许你可以利用它来定位你想要的东西。也许您可以发布一些代码，以便我们可以给您更具体的答案？

于 2009-01-12T19:38:43.780 回答
0

在元素上放置一个自定义类。

<ul>
<li class="first">Blah<li>
<li>Blah<li>
<li>Blah<li>
</ul>
于 2009-01-12T19:39:03.560 回答
0

用这个

div * { padding-left:20px; }
div * * { padding-left:0; }

首先，您以所有子代为目标，然后通过以所有孙代为目标来重置 css 声明。

于 2010-02-11T01:38:50.390 回答
0

我使用的跨浏览器解决方案如下。它不使用 IE6 hack 并正确显示嵌入列表（例如，您需要以不同的方式设置 OL 和 UL 嵌套项的样式）。

ul, ol {
    /* Set margins, padding, and other generic styles */
}
ul li, ul ul li, ol ul li {
    list-style-type: disc; /* unordered lists */
}
ol li, ul ol li, ol ol li {
    list-style-type: decimal; /* ordered lists */
}

就像 yodeling CSS 一样简单！

于 2011-06-08T19:56:56.783 回答