Question

我在HTML页面中使用子选择器的CSS样式如下：

<html>
    <head>

        <title>MSO Bug</title>
        <style type="text/css" media="screen,print">
            ol{list-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中不起作用！

（我知道后代选择器 - 出于某种原因我不能在这里使用它）

Answer 1

您需要为子后代指定一个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 Transitional：

 <!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将恢复为怪异模式，只支持后代选择器，而不支持子选择器。

Answer 2

始终将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。尝试在代码的第一行上方添加<!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>

IE7，IE8中的子选择器问题

2 个答案: