ul li的使用及瀏覽器相容問題

2021-05-11 13:20:30 字數 928 閱讀 8623

大家都知道 ul 預設值中,ie 給了 ul 乙個 margin 值,而 ff 給了乙個 padding 值。如果我們給 ul 加上乙個背景或者框架,它就會露出原形,也就是在 ie 中專案符號是在 ul 外面,所以 ul 的寬度是不把專案符號算在裡面的(如下圖1);而 ff 是把專案符號算在 ul 裡面的(下圖2)。這樣對 css 解釋的差異就導致了在不同瀏覽器中會產生不同的效果。

在實際應用中,我們會先把樣式重置-css reset(如上圖3)。把 margin:0;padding:0; 後會發現專案符號不見了。新增 list-style-position:inside; 後專案符號又回來了(如上圖4)。

list-style-position:outside: 列表專案標記放置在文字以外,且環繞文字不根據標記對齊。

inside: 列表專案標記放置在文字以內,且環繞文字根據標記對齊。

li 浮動後,專案符號在 ie 下不會顯示,但在 ff 下顯示正常。不過我們經常需要的效果是不讓顯示專案符號,所以這個 ie bug 可以基本不管啦。但是一定要設定 list-style-type:none; 要不然你會發現在 ff 中依然會出現專案符號的。

這裡介紹乙個屬性 display:list-item; 將塊物件指定為列表專案,並可以新增可選專案標誌,也就是 ul/li 的簡化版,在 div 和 p 中可以設定為列表顯示,並且可以為列表專案新增符號。

通常我們不會用預設的專案符號,因為瀏覽器的不同,它的位置和大小在各個瀏覽器中的渲染也是有差異的,而且它不能精確定位,所以一般我們都是通過對 li 設定背景 backgroud-image: url() no repeat; 來模擬專案符號的。

下面是專案符號的系統樣式:list-style-type:

這是原文**:

ul li的使用及瀏覽器相容問題

大家都知道 ul 預設值中,ie 給了 ul 乙個 margin 值,而 ff 給了乙個 padding 值。如果我們給 ul 加上乙個背景或者框架,它就會露出原形,也就是在 ie 中專案符號是在 ul 外面,所以 ul 的寬度是不把專案符號算在裡面的 如下圖1 而 ff 是把專案符號算在 ul 裡...

css ul li 的使用及瀏覽器相容問題

如果我們給 ul 加上乙個背景或者框架,它就會露出原形,也就是在 ie 中專案符號是在 ul 外面,所以 ul 的寬度是不把專案符號算在裡面的 如下圖1 而 ff 是把專案符號算在 ul 裡面的 下圖2 這樣對 cssgdhgzdaf 解釋的差異就導致了在不同瀏覽器中會產生不同的效果。在實際應用中,...

瀏覽器核心及相容問題

ie6,ie7可以識別 和 ie6可以識別 important 表示高優先順序,ie7及以上,firefox都支援,ie6認識帶 important的樣式屬性,但不認識 important的優先順序 引擎字首 ms moz o webkit 詳見 ie可以使用parentelement獲得父結點,p...