2009-10-20 4 views
1

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

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

Даже если я использую список стиль как 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> 
+0

Я сам столкнулся с подобной проблемой и чувствую [это визуальное объяснение] (https://developer.mozilla.org/en/Consistent_List_Indentation) может помочь разработать для других, которые до сих пор не получают его – damx

ответ

2

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

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

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

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

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

+0

Использование Internet Explorer и Opera левый край, в то время как Mozilla использует отступы для отступов списка –

+0

Возможно, стоит указать опцию 'list-style-position: inside;'. Хотя это не часто желаемый (или, по крайней мере, * используемый *) вариант стилизации. –

 Смежные вопросы

  • Нет связанных вопросов^_^