Неупорядоченный список HTML отстой в IE7

Question

Я создал упорядоченный список HTML, который отлично выглядит в FF, но довольно ужасен в IE. Мои конкретные проблемы с отображением списка в IE:

1. Маркеры списка отсутствуют
2. Интервал по вертикали между элементами списка очень неравномерный

Кажется, что верхние индексы являются причиной (2), но я не уверен, как решить эту проблему (не удаляя верхние индексы).

РЕДАКТИРОВАТЬ: Я разочаровался в своих мечтах с одним списком и разделил список на 3 отдельных списка. Я удалил ссылку из текста выше, чтобы не запутывать будущих читателей.

Спасибо, Дон

Answer 1

Это известная ошибка IE5, IE6 и все еще в IE 7.

IE 8 Beta 2 и последняя версия, IE 8 RC1, будут правильно отображать вашу веб-страницу.

Но это список ошибок списка элементов до IE 8:

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

http://gtwebdev.com/workshop/gaps/white-space-bug.php

Answer 2

Если это список внизу страницы, у вас есть куча пробелов внутри тегов списка. Я не знаю, является ли это причиной проблемы, но вы можете попробовать устранить ее и посмотреть, поможет ли это. Надстрочные индексы также могут сбрасывать со счетов. Попробуйте задать самому списку высоту строки 2em (или более) и посмотрите, сглаживает ли это все.

РЕДАКТИРОВАТЬ : вы также можете поиграть с левым отступом / полем для элементов списка и увеличить его, чтобы увидеть, возвращает ли это маркеры списка обратно. Я должен был сделать это с помощью списочных меню, чтобы мои пункты меню отображались в правильном выравнивании.

Answer 3

Как уже упоминалось, высота связана с надстрочным текстом.

Что касается пуль Плавающий элемент списка не работает в IE. Если вы планируете сделать макет из трех столбцов, попробуйте что-то вроде этого.

<style type="text/css">
ul {  
  float:left;
  padding:2em;
  width:14em;
}
</style>

<ul>
 <li>col1 - item1</li>
 <li>col1 - item2</li>
 <li>col1 - item3</li>
</ul>

<ul>
 <li>col2 - item1</li>
 <li>col2 - item2</li>
 <li>col2 - item3</li>
</ul>

<ul>
 <li>col3 - item1</li>
 <li>col3 - item2</li>
 <li>col3 - item3</li>
</ul>

Answer 4

Вы можете установить высоту элементов для учета верхнего индекса? вероятно, лучше всего сделать это в CSS.

Answer 5

Я могу с уверенностью сказать, что верхние индексы изменяют высоту строки. Если вы хотите задать обычную высоту строки, вам нужно будет обернуть все в таблицу, чтобы предотвратить компоновку на основе потока.

Answer 6

попробуйте сделать это для вашего LI's

<li>text</li><li>text</li><li>text</li><li>text</li><li>text</li><li>text</li>

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

Answer 7

Это сработало для меня в IE7 и FireFox 3. Он использует много «span», что делает меня несчастным, но я уверен, что вы можете сделать его лучше, немного поиграв.

Очевидно, что когда "float: left" установлен для отдельных объектов "li", пули исчезнут. (здесь есть чат: http://www.webmasterworld.com/html/3004613.htm)

Однако, если вы переместите «float: left» в теги «span» и «width» на «ul» (в отличие от подстиля «div»), как я сделал ниже обе проблемы исчезают.

Обратите внимание на другие изменения, такие как "br" внутри тега "ul" и больше нет тега "div".

Изменения стиля:

.column-list {width:60em}
.column-list span{float:left;} 
.column-list span li{padding: 4px; height: 15px; width:17em;}
.column-list br {clear: left;}

HTML изменения:

<ul class="column-list">
<span ><li>Baignade</li></span>
<span  ><li>Bateau à moteur</li></span>
<span  ><li>Canot</li></span>
<span  ><li>Golf</li></span>
<span ><li>Kayak</li></span>
<span  ><li>Marche</li></span>
<span  ><li>Motomarine</li></span>
<span  ><li>Patin à roues alignées</li></span>
<span  ><li>Pêche</li></span>
<span  ><li>Pédalo</li></span>
<span  ><li>Plages publiques et privées</li></span>
<span  ><li>Planche à voile</li></span>
<span  ><li>Randonnée pédestre</li></span>
<span  ><li>Ski nautique</li></span>
<span  ><li>Tennis</li></span>
<span  ><li>Véhicule tout-terrain (Quad)</li></span>
<span  ><li>Vélo (piste cyclable à proximité)</li></span>
<span  ><li>Vélo de montagne</li></span>
<br />
</ul>

Answer 8

Вы можете увидеть, исчезают ли маркеры, потому что вы соединяете float-left с отступом - не знаете, как IE считает маркеры как часть вычислений размера.