瀏覽器兼容性之無序列表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代替，這是一個跨瀏覽器的，易於維護的無序列表的自定義符號解決方法。