IE7、IE8中的子选择器问题

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

始终将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 添加到您的问题中，看起来有几处是错误的：

1. 您没有声明文档类型。尝试在代码的第一行上方添加<!doctype html>。

2. 您的主要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>
   

Answer 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 模式，并且只支持后代选择器，不支持子选择器。