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

2024-07-11 08:27:04

字體：大中小

來源：轉載

供稿：網友

如果我們給 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

上一篇：規范HTML代碼可以節省修改代碼的時間

下一篇：使用一張或兩張圖片創建大背景網站