Проблема дочернего селектора в IE7, IE8 - PullRequest
Новая
       33

Проблема дочернего селектора в IE7, IE8

5 голосов
/ 12 мая 2010

У меня есть стиль CSS с использованием дочерних селекторов на странице HTML следующим образом: 

<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!

(я знаю о потомках селекторов - по какой-то причине я не могу использовать это здесь)

Ответы [ 2 ]

12 голосов
/ 12 мая 2010

Вам нужно указать 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 Frameset: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

Без DOCTYPE IE возвращается в режим причуд и будет поддерживать только селекторы-потомки, а не дочерние.

7 голосов
/ 12 мая 2010

Всегда устанавливайте 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. Ваш HTML для вашего основного OL недействителен. Вы закрываете элементы 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>
...