浏览器兼容性之无序列表dl

浏览器兼容性之无序列表dl

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

标记list-style-type,在不同的浏览器中大小不和位置的渲染也是有差异的，故很少使用。list-style-image属性可以给无序列表一个自定义的独一无二的表现，不幸的是，在IE下使用此方法添加项目编号是bug多多。一个更好的解决方法是list-style-type:none;添加backgroundimage到列表的li元素上，并相应的调整backgroundimage的位置，并设置为no-repeat。

 

浏览器中的差异

1、列表元素添加display:block后　　

　　在InternetExplorer8,Opera9,Chrome,Firefox2&3,andSafari下，添加display:block会让有序或无序列表中li元素的项目编号消失。　　　但在IE6和IE7下，添加display:block项目符号依旧存在　　

2、列表项目添加float:left　　　　

    在IE6和IE7下，给列表项目（没有其他样式）添加float:left将会使列表项水平对齐，同时项目符号（或项目编号）消失。IE8和其他所有浏览器下，列表项会水平对齐，但是项目符号（或项目编号）仍然可见。　

   当列表项浮动的时候，我们必须记住另外一个要点，就是列表容器（ul元素）在内部仅有浮动元素时会死翘翘，这在所有的浏览器下都会以相同的方式发生，添加overflow:hidden是解决此问题的方法之一。

　为了能在不同浏览器下达到大致相同的float:left效果，最好的方法是是使用display:inline。

3、IE下有“Layout”的有序列表

　在IE6和IE7下，如果有序列表中的列表项有“Layout”，则有序列表的数值将不会增加。
　hasLayout属性不能被直接设置，但是如果一个元素设置了宽高，浮动，绝对定位等待就会改变haslayout。
4、IE6&IE7下的padding及margin
　　在大部分的浏览器下，为了移除项目符号或项目编号，让内容左侧对齐显示，需要设置左padding为0，但是这在IE6和IE7下并不管用，在IE6，7下需要设置左margin为0取而代之。
5、在所以浏览器下实现一致的列表样式
　　为了避免在不同浏览器下处理列表样式的时候出现问题，最好的方法是使用在前面提到的CSS的重置(cssreset)，cssreset几乎可以将浏览器所有默认设置差异设置为最小，并允许所有浏览器下都在同样的基础上工作。虽然某些样式下依然存在差异，但是它们不会被当作一个难点来处理了。
　　另外，正如前面提到了，最好完全避免使用list-style-image属性，而以设置background代替，这是一个跨浏览器的，易于维护的无序列表的自定义符号解决方法。