Дочерняя селекторная проблема в IE7, IE8
У меня есть стиль 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', второе с и третье со 'мной' как ожидалось.
Но это не работает в IE7/8!
(Я знаю о происходящих селекторах - по некоторым причинам я не могу использовать это здесь),
2 ответа
Всегда устанавливать стиль списка и свойства типа списка в 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-код в свой вопрос, похоже, что произошла ошибка:
- Вы не объявляете тип документа. Попробуйте добавить
Ваш HTML-код для основного
OLнедействителен. Вы слишком рано закрываете элементыLI. ЭлементOLне может иметь другойOLв качестве прямого дочернего элемента. Вот как это должно выглядеть:-
level1
-
level2
-
level3
-
-
{{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 Переходный:
<!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 возвращается в режим причуд и будет поддерживать только дочерние селекторы, но не дочерние селекторы.