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

2022-09-25 15:51:14 字數 867 閱讀 2589

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

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

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

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

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

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

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

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

本文標題: css ul li 的使用及瀏覽器相容問題

本文位址:

關注ie瀏覽器對於iview admin相容性處理

解決方案 安裝 babel loader 作用 babel loader,用來處理es6語法,將其編譯為瀏覽器可以執行的js語法 1.安裝依賴 npm install d babel loader babel core babel preset env webpack 2.在vue.config.j...

easyui form與360瀏覽器的不相容性

之前的系統主要用firefox進行前台測試,偶爾用ie 搜狗,360測試一下,感覺功能一切都正常。結果這幾天給深圳的員工使用時,發現他們都是登入不上,登入時用的是easyui的form控制項,結果一直顯示登入中。我這邊用ff測試過一直都沒問題,發現對方用的是360瀏覽器,結果我也用了乙個360,果然...

CSS中 important的作用 瀏覽器相容性

對於ie系列瀏覽器都能夠識別,firefox 瀏覽器則不能識別 important只有ie7.0和firefox可以識別,但是ie6.0不能成功應用.在 1 中,之所以把 放在後面是因為ff不識別 而導致只對它設定了一次border 而ie 系列進行了兩次border設定後,後乙個屬性覆蓋了前乙個屬...