网页设计列表标记ul,ol,dl在不同浏览器的兼容问题

一、可以看做废话的前言
HTML列表元素（如ol,ul,dl）等在现下的网站开发制作中有着非常广泛的应用，然而，它们的在不同浏览器下的脾气却不一样。本文就是分析这些列表元素的基本特性，在不同浏览器下的各类兼容性问题，以及介绍一些常见的应用等。

对初学者或是有一定CSS方面经验的同行们应该会有帮助的。

二、HTML中可用的列表元素
1、无序列表：ul
无序列表是最常使用的列表，下图显示了无序列表在不同浏览器下的显示：

demo页面

正如上面显示的，无序列表在不同浏览器下的默认设置是由些许差异的。当然，在如今实际的网站项目上是很少看到没有任何修饰的无序列表了。其中原因之一就是CSS的重置(css reset)，已经将无序列表默认的列表项目符号，margin或padding都去掉了。

无序列表的一些特定的css属性有list-style-type，list-style-position，和list-style-image。这些属性设置了列表项目符号的类型，标记的位置，以及使用图片代替标记。这三个属性可以使用list-style进行合并缩写。

list-style-type属性可以设置为一些不同的值，下面图表展示的就是部分值的页面效果：

依赖于用户的浏览器及操作系统，某些list-style-item值可能不能正确显示，通常默认为十进制数值，用无需列表实现递增数值是不推荐的，因为这样“无序列表”其本身的语义已经不复存在了。

list-style-position针对于列表标记的位置，可以被设置为outside（默认）或是inside。如果list-style-image被设置的话，其也会影响图片的位置。

list-style-image属性可以给无序列表一个自定义的独一无二的表现，不幸的是，在IE下使用此方法添加项目编号是bug多多，故很少被使用。一个更好的解决方法是添加background image到列表的li元素上，并相应的调整background image的位置，并设置为no-repeat。在maxdesign.com上，已经通过分步讲解演示了这个方法，而且在所有的浏览器下都工作良好。

2、有序列表：ol
有序列表在当列表项目的每个列表项目前面需要一个递增值的时候使用（例如1,2,3等）。有序列表的列表类型list-style-type可以被设置为任何在无序列表下可以设置的值。在大部分情况下，有序列表要么前面是个递增数值，要么前面没有任何标记。不建议使用有序列表实现类似于无序列表的表现。因为这样，有序列表本身的语义已经不正确了。

3、定义列表：dl
定义列表用来标记已经定义的列表项，它们包括定义标题(dt)以及定义本身(dd)。定义列表项目没有必要完全匹配，下面的代码在严格的XHTML下是完全合法的：

<dl>
	    <dt>无线音乐咪咕汇 </dt>
	    <dt>哥本哈根会议</dt>
	    <dd>《十月围城》</dd>
</dl>

这样，您可以在单个dd下面使用多个dt，也可以在单个dt下面使用多个dd。

定义列表的视觉显示，默认情况下，各个浏览器的显示几乎是一致的，如下图所示：

demo页面

上图对应的HTML代码如下：

 <dl> <dt>标题 </dt> <dd>这里是定义的内容 </dd> </dl>
 <dl>
     <dt>热门电影 </dt>
     <dd>十月围城 </dd> <dd>刺陵 </dd> <dd>三枪拍案惊奇 </dd> <dd>阿凡达 </dd>
 </dl>
 <dl>
     <dt>热点关注 </dt>
     <dd>股市 </dd> <dd>房价 </dd> <dd>元旦 </dd> <dd>曹操墓 </dd>
 </dl>

4、过时淘汰的列表：menu&dir
<menu>和<dir>元素，从技术上说，也可以称为“HTML列表”，但它们在XHTML中已过时淘汰了，所以这里不详细讨论它们。

5、HTML5中的列表

在HTML中，无序列表基本上保持不变，虽然似乎现在它被简称为“列表”，新的

ol元素有轻微的改变，它获得了两个新属性：reversed，这是一个布尔值，用来表示列表是上升还是下降；start，这是个整数，用以宣告有序列表的起点。

此外，<figure>和<details>元素将被增加，它们会有子元素，其中包括<dt>和<dd>元素。

更多关于HTML5方面的知识可以参见淘宝空雁的 揭秘HTML5和CSS3【珍珠奶茶帮】的这篇文章。另外您还可以点击这里查看在线的ppt。