浏览器兼容性之无序列表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。

 

浏览器中的差别

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

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

二、列表项目添加float:left　　　　

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

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

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

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

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