HTML无序列表在IE7中很烂

Question

I've created a HTML ordered list which looks fine in FF, but pretty awful in IE. My specific problems with the way IE displays the list are:

1. List markers are missing
2. Vertical spacing between list items is very uneven

It seems the superscripts are the cause of (2), but I'm not sure how I can fix this problem (without removing the superscripts).

EDIT: I gave up on my single-list dreams and split the list into 3 separate lists. I've removed the link from the text above to avoid confusing future readers.

Thanks, Don

Answer 1

This is a known bug of IE5, IE6, and still in IE 7.

IE 8 Beta 2 and the latest, IE 8 RC1, will display your web page correctly.

But these are a list of list item bug before IE 8:

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

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

Answer 2

If it's the list at the bottom of the page, you've got a bunch of whitespace inside your list tags. I don't know if that's causing the problem, but you might want to try eliminating it and see if that helps. The superscripts may also be throwing things off. Try giving the list itself a line height of 2em (or more) and see if that evens things out.

EDIT : you might also want to play with the left padding/margin on the list items and increase it to see if that brings the list markers back. I've had to do this with list-based menus to get my menu items to show up in the proper alignment.

Answer 3

I can tell for certain that the superscripts are what's altering the line height. If you want to force regular line heights you'll have to wrap everything in a table to prevent flow-based layount.

Answer 4

can you set the height of the li elments to account for the superscript? probably best to do that in CSS.

Answer 5

As others mentioned the height is due to the superscripted text.

As for the bullets Floating a list-item doesn't work well in IE. If you plan on doing a three column layout try something like this.

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

您可能会看到子弹是否消失，因为您将左浮动与填充耦合在一起-不知道IE如何将子弹算作大小计算的一部分。

Answer 7

try doing this for your LI's

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

Don't add in any line breaks. It's silly that this might fix it, but it's true.