IE7、IE8中的子选择器问题
Posted
技术标签:
【中文标题】IE7、IE8中的子选择器问题【英文标题】：Child selector problem in IE7, IE8 【发布时间】：2011-02-18 13:53:38 【问题描述】：我有一个在 html 页面中使用子选择器的 CSS 样式，如下所示：
<html>
<head>
<title>MSO Bug</title>
<style type="text/css" media="screen,print">
ollist-style-type:decimal;
ol > ol list-style-type:lower-alpha;
ol > ol >ol list-style-type:lower-roman;
</style>
</head>
<body>
<div>
<ol>
<li><div>level1</div></li>
<ol>
<li><div>level2</div></li>
<ol>
<li><div>level3</div></li>
</ol>
</ol>
</ol>
</div>
</body>
</html>
在 Firefox 中，CSS 工作正常 - 第一个列表级别以“1”开头，第二个以“a”开头，第三个以“i”开头。
但这在 IE7/8 中不起作用！
（我知道后代选择器 - 由于某种原因我不能在这里使用它）
【问题讨论】：
MatW - 我将所有列表项目符号都设为“1”。编辑以包含整个页面。 你试过没有选择器之间的空格吗？ol>ol 而不是 ol > ol ?
【参考方案1】：
始终将list-style 和list-style-type 属性设置为ul（而不是li）。
ol list-style-type: decimal;
ol > li > ol list-style-type: lower-alpha;
ol > li > ol > li > ol list-style-type: lower-roman;
更新：现在您已将 HTML 添加到您的问题中，看起来有几处是错误的：
-
您没有声明文档类型。尝试在代码的第一行上方添加
<!doctype html>。
您的主要OL 的 HTML 无效。您过早地关闭了 LI 元素。 OL 元素不能有另一个 OL 作为直接子元素。它应该是这样的：
<ol>
<li>
<div>level1</div>
<ol>
<li>
<div>level2</div>
<ol>
<li>
<div>level3</div>
</li>
</ol>
</li>
</ol>
</ol>
</li>
</ol>
【讨论】：
+1 给那个马蒂亚斯。我修复了这个基本错误，并编辑了帖子以包含完整的页面。仍然不能在 IE7 中工作（并继续在 FF 中工作）。 你是对的。这是您提到的两个错误的组合。接受你的回答。不幸的是，许多 RTF 编辑器生成的代码就像我给出的那样（例如 YUI 编辑器）。需要找到解决方法...不过还是谢谢！ 我很困惑这个答案是否有效！你的 CSS 现在不应该工作了，因为 ol 不再直接相关...... MatW - 这实际上不起作用！请看我上面的评论。但是 Mathias 给出的解释是正确的，因此我接受了他的回答。【参考方案2】：您需要为子后代指定一个 DOCTYPE 才能在 IE7 / 8 中工作。
HTML 4.01 严格：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 过渡：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">>
HTML 4.01 框架集：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
如果没有 DOCTYPE，IE 会恢复到 quirks 模式，并且只支持后代选择器，不支持子选择器。
【讨论】：
我在 之前添加了以上三种方法。它们都没有导致 CSS 工作。如何知道 IE 处于哪种模式？ 应该可以；该错误与将- 放入 无关...上面的代码经过测试并且可以工作。
以上是关于IE7、IE8中的子选择器问题的主要内容，如果未能解决你的问题，请参考以下文章