列表在各浏览器中的表现差异

　　CSS总是出人意表，而IE却总是让人意外，这点相信大家都有同感了。

　　我们今天就说说列表，在讲这个之前，得先了解一些关于列表本身的特性，它们在IE及其它非IE浏览器中的表现差异。

　　例如，我随便写了一段：

<ul>
<li>无序列表</li>
<li>有序列表</li>
</ul>

　　然而就这一段普通的代码，在IE及非IE下也有着截然不同的效果（加上border后更效果更直观）。

　　IE下的效果（图一）：

　　非IE下效果（图二）：

　　先假设我们不知道是什么原因导致的这种异同。

　　由于图一和图二左边都多出了很多空白，于是首先会让我们想到的就是内外补丁padding和margin。

　　为了验证我们的推测是否正确，首先我们将padding初始化为0，代码如：ul {padding:0;}看效果是否有变化。结果，IE的效果仍和（图一）相同；而非IE浏览器则变为：

　　（图三）：

　　接下来我们将margin初始化为0，代码如：ul {margin:0;}

　　结果为：IE的效果变化为（图三）；而非IE浏览器的效果仍和（图二）相同，未发生变化。

　　由此可见，IE下的留白是由margin引起的，非IE的留白是由padding引起的（margin和padding大概为40px，可以在自己机器上测试一下）。

　　那么如何让IE和非IE同时表现为图二的效果，又如何让IE和非IE同时表现为图一的效果呢？

表现为图一的代码：

ul {
 border:1px solid #ddd;
 padding-left:0;
 margin-left:40px;
}

表现为图二的代码：

ul {
 border:1px solid #ddd;
 padding-left:40px;
 margin-left:0;
}

　　讲到了这里，我们不得不说出现在列表里的另一个异常，那就是浮动对列表产生的影响。

　　用了一段时间列表后，你肯定会发现，只要对列表元素进行了浮动，在IE中，列表前的默认序号（圆点或阿拉伯数字，即list-style-type）就会消失无形；而在非IE中却是正常的。

　　先来一段简单的测试：

ul {
 border:1px solid #ddd;
 float:left;
}

　　IE下的效果（图四）：

　　非IE下效果（图五）：

　　由前面所述，我们很容易就知道这是因为margin和padding的原因所导致，而只需将margin及padding都设置为0后，你会发现各浏览器中的序号都不见了，效果都和图四一致。

　　到这里，可能还会问，我并没有将list-style-type设置为none啊，按理前面的序号应该还在才是。确实，这个说法没错，但序号不见了又是怎么一回事。其原因还是margin和padding，因为默认情况下的序号位置list-style-position为outside，这就要求必须为序号出现预留位置，或margin或padding。

　　其实这种情况下的序号也并没有消失，只是因为margin和padding都为0了，于是序号没有了“立足之地”，所以才从我们的眼前凭空“蒸发”了。

　　当然，序号还是可以出现的。而要解决这个问题，就得想办法让序号出现不需要预留位置，要解决位置问题，我们当然首先就会想到list-style-position，默认outside是需要留白才能显示的，那我们就更换为inside试试。

ul {
 border:1px solid #ddd;
 list-style-position:inside;
 float:left;
}

　　于是我们兴奋的发现，所有的浏览器都变成这样的了：

　　

 　　在了解了这些之后，相信大家对各浏览器中列表的兼容问题都可以比较好的解决。其实只要了解了是什么原因导致各浏览器间的表现异同，然后再去做兼容，还是非常简单的。