Question

我已经创建了一个HTML有序列表，在FF中看起来很好，但在IE中却非常糟糕。 IE显示列表的方式的具体问题是：

缺少列表标记
列表项之间的垂直间距非常不均匀

上标似乎是（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

我可以肯定地说，上标是改变线高的原因。如果你想强制规则的行高，你必须将所有内容都包装在一个表中以防止基于流量的下限。

Answer 4

你可以设置li元素的高度来计算上标吗？最好在CSS中做到这一点。

Answer 5

正如其他人所说，身高是由于上标文字所致。

关于子弹浮动列表项在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 6

您可能会看到子弹是否正在消失，因为您将浮动左侧与填充相结合 - 不确定IE如何计算子弹作为大小计算的一部分。

Answer 7

尝试为你的LI

做这个

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

不要添加任何换行符。愚蠢的是，这可能会解决它，但这是真的。

Answer 8

这在IE7和FireFox 3中对我有用。它使用了很多“跨度”，这让我感到不快，但我相信你可以通过一点点玩耍来让它变得更好。

显然，当单个“li”物体上设置“float：left”时，子弹就会消失。（这里有关于此的聊天：http://www.webmasterworld.com/html/3004613.htm）

但是，如果你将“float：left”移动到“span”标签中，将“width”移动到“ul”（而不是“div”的子样式），就像我在下面所做的那样这两个问题似乎都消失了。

注意其他更改，例如“ul”中的“br”，而不再是“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>

HTML无序列表在IE7中很糟糕

8 个答案: