Маркеры элементов списка исчезают в IE6 и IE7

Я создал список элементов, используя <ul> и <li>. Он отлично работает в Firefox, но в Internet Explorer 6 и 7 я не вижу маркер списка.

Вот что я сделал:
У меня есть глобальное значение сброса ul , li. После этого я создал список из двух столбцов, используя два блока <ul>. Я перезаписываю глобальное значение стиля ul li none в CSS, чтобы указать стиль как disc. когда я делаю это, я вижу элемент маркированного списка, но когда я устанавливаю ширину ul как определенное значение, маркеры li исчезают в IE.

Даже если я использую стиль списка как list-style-image: url(bullet.gif), он также не отображается в IE 6 и 7.

Вот HTML-код. Пожалуйста, взгляните на это и дайте мне знать, как я могу архивировать маркированный список во всех браузерах.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>List Sample</title>
<style>
* { padding: 0; margin: 0; }

body { font-size: 62.5%; background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; color:#000000;margin:0; }
p,ul { font-size: 1em; }
li { list-style: none; font-size: 1em }
.clear { clear: both; height:0px; font-size:0px;}

#box1{ font-size:1.5em; margin:10px 0px 0px 10px; width:350px; border:1px solid red; padding:10px 20px; clear:both;}
#box1 ul#listLeft{ display:inline;}
#box1 ul#listLeft li{ list-style:disc; border:1px solid red; width:150px; float:left;}
#box1 ul#listRight li{ list-style:disc; border:1px solid red; width:150px; float:left;}
</style>

</head>
<body>
<div id="box1">
<ul id="listLeft">
<li>Popular articles</li>
<li>Submit news</li>
<li>Newsletter</li>
<li>Design contest</li>
<li>Winners list</li>
</ul>
<ul id="listRight">
<li>Popular articles</li>
<li>Submit news</li>
<li>Newsletter</li>
<li>Design contest</li>
<li>Winners list</li>
</ul>
<div class="clear"></div>
</div>
</body>

person pravat    schedule 20.10.2009    source источник
comment
Только что сам столкнулся с похожей проблемой и чувствую, что это визуальное объяснение может помочь разобраться тем, кто все еще не знает не понял   -  person damx    schedule 20.11.2010


Ответы (1)


Для нативных дисковых маркеров вам нужны поля, отступы.. попробуйте с

ul li { margin:0 0 0 15px; padding:0 0 0 15px; }

И продолжайте уменьшать левое значение для любого из них, пока не добьетесь согласованности (я забыл, какой браузер использует какой - вы могли бы просто полагаться только на один из них). Если вы хотите использовать изображение, используйте:

ul li { background:url(/images/bullet.gif); zoom:1; }

Масштаб предназначен для противодействия странностям IE, хотя иногда он создает странности. Не забудьте установить положение фона в зависимости от вашего дизайна.

person meder omuraliev    schedule 20.10.2009
comment
Internet Explorer и Opera используют левое поле, в то время как Mozilla использует заполнение для отступа списка. - person Russ Cam; 20.10.2009
comment
Возможно, стоит также указать на вариант list-style-position: inside;. Хотя это не часто желательный (или, по крайней мере, используемый) параметр стиля. - person David says reinstate Monica; 20.10.2009