在网站项目制作中，ul、ol、dl这类列表元素的应用是相当广泛的。但是不同浏览器对它们的解析是有差异的。本文将对这些列表元素的基本特性、各浏览器兼容问题，及它们的常见应用展开探讨。

Ul：无序列表

无序列表最为常用，先来看一个示例代码：

1. 无序列表

2. 无序列表

3. 无序列表

这个示例代码在不同浏览器的效果分别如下：

大家可以看出，这段示例代码里的ul是没做任何样式修饰的，由此可见，在默认设置下的无序列表在不同浏览器里显示是有差异的，而且这差异还是比较大的。介于此，我们通常会在CSS中将UL进行重置，即：ul {margin:0; padding:0;}，这样便成了如下效果：

可以看出列表内容显示已没有什么差异，唯一差异在于列表的项目符号，原本可显示正常的IE6下现在直接不显示了，而其他几个浏览器显示也不尽相同。这个项目符号可以由特定的css属性list-style-type，list-style-position和list-style-image来控制和改变。list-style-type设置了列表项目符号的类型，list-style-position设置了列表项目符号标记的位置，list-style-image设置了列表项目使用图片代替标记。

这三个属性我们通常使用list-style来合并缩写。list-style-type的属性值多达十余个，如：armenian、circle、decimal、georgian、decimal-leading-zero、lower-alpha等，大家可以在上面的示例中添加此属性及其各值来查看页面效果。基于不同浏览器和操作系统，有些list-style-item值可能显示有差，通常默认为十进制数值，另外我们不推荐用无序列表实现递增数值，因为既然是无序列表，我们再给其赋予递增数值，这显然违背了其本身的语义。

list-style-position默认值是outside，我们也可以设置为inside，这个从语义上就很容易理解，即项目符号标记的位置是在外侧还是内侧。

list-style-image是将项目标记符号设置为自定义的图片，但我们是极少用到它的，因为此方法存在不少bug。要想达到这个目的，其实有个更好的办法，也是我个人比较常用的。即将自定义图片作为背景图片（background-image）赋予li元素上，再设置background-position来调整图片位置，并设置background-repeat为no-repeat即可。通常我会给li设置一个左填充即padding-left，来配合使用，使效果美观且统一。这个方法在各个浏览器上可谓是百试不爽，相当好用。

Ol：有序列表

有序列表与无序列表的唯一区别就在于有“序”，当列表项目的每个列表项目前面需要一个递增值的时候使用（例如1,2,3等），即有序列表的默认项目标记是递增数值。除此外，有序列表的list-style-type属性值与无序列表下的值是通用的。因此，若非需要列表项目标记为递增数值，我们是不建议使用有序列表的，尽管可以设置为无序样式，因为如果这样，有序列表本身的语义就失去意义了。

Dl：定义列表

许多人对定义列表都不熟悉，其实它也是比较常用且好用的。定义列表是用来标记已经定义的列表项，由两部分元素组成，包括定义标题(dt)和定义本身(dd)。定义标题和定义本身并不一定要一对一匹配，可以是一个（或若干个）定义标题多个定义本身，也可以是多个定义标题一个（或若干个）定义本身。如图：
这段HTML代码为：

定义标题
定义本身
定义本身
定义标题
定义标题
定义本身

以上三种列表元素便是目前网站中最为常见的了，我们只要了解了各自的特点和针对性，那使用起来就得心应手了。