原來工作中曾經碰到過ul列表裡一些異常的表現,
加上昨天看到了 這個貼子,所以測試了一下list-style的各種屬性,發現了乙個有意思的現象
先看一下css手冊中,對於list-style的解釋
定義和用法
list-style 簡寫屬性在乙個宣告中設定所有的列表屬性。
說明 該屬性是乙個簡寫屬性，涵蓋了所有其他列表樣式屬性。由於它應用到所有 display 為 list-item 的元素，所以在普通的 html 和 xhtml 中只能用於 li 元素，不過實際上它可以應用到任何元素，並由 list-item 元素繼承。
可以按順序設定如下屬性：
•list-style-type
•list-style-position
•list-style-image
可以不設定其中的某個值，比如 "list-style:circle inside;" 也是允許的。未設定的屬性會使用其預設值。
預設值： disc outside none
在日常工作中經常需要對ul,li進行css reset ,將列表符號隱藏.
最常用的寫法就是ul,li,ol(也有人用ul,li,ol)
提示：您可以先修改部分**再執行
這個頁面在ie6,7,8,ff中都沒什麼問題.
但是我們不能忽略的是,list-style: 包含了三個屬性:
複製**
**如下:
list-style-type
list-style-position
list-style-img
如果不注意這三個屬性的話,list-style有時候就會出來搗蛋
比如當ul,浮動後,需要display:inline 來解決在ie6中的雙倍邊距問題時,奇怪的事情發生了:
提示：您可以先修改部分**再執行
.ul01
.ul01,.ul01 li
上面的頁面在ie8,ff中仍然正常
但是在ie6,7中,ul內側與li產生了距離.
由此可見,當我們定義了list-style:none以後,儘管列表符並不出現,但是在ie6,7中,仍然留有它的位置.
看看在ff裡這個ul到底擁有哪些屬性
圖上可見,當css中定義list-style:none時,對list-style-position 並沒有影響,仍然是ff瀏覽器的預設設定,值為outside
而ie6,7中很可能預設list-style-position:inside
為了證實這一點,我把list-style:none 換為list-style:none inside none再測試了一下
提示：您可以先修改部分**再執行
執行後可以發現,在ie6,7中,與list-style:none的表現一模一樣.
所以我推測在ie6,7中當ul具有float:left和display:inline屬性後,設定了list-style:none,則list-style-position也預設為inside了;
所以我得出的總結是
在ie6,7下,當ul不具有float:left;display:inline;時:
無論有沒有list-style:none這個屬性,列表符都被隱藏,不佔位置(下面**中的5,6)
當ul具有float:left;display:inline;屬性時
list-style:none,列表符被隱藏,但是仍然留有位置(list-style-position:inside);(下面**中的 ul1,ul3)
未設定list-style:none;列表符被隱藏,也不佔位(list-style-position:outside)(**u程式設計客棧l4)
而ul02 在參與測試的各瀏覽器中表現都比較理想
最後這一段**對比一下各種情況下list-style的表現,尤其注意4,5,6在ie6,7下的表現
提示：您可以先修改部分**再執行
通過上面**表現結果的對比,我認為:
在firefox中只要list-style-type為none ,則無論list-stype-position的值為outside或inside , list-style都能很好的被隱藏
而在ie6,7中,僅設定list-stylwww.cppcns.come:none,並不足以解決所有問題
所以我認為在css reset的時候使用 list-style:www.cppcns.comnone outside none 更好
本文標題: css list-style熟悉解釋
本文位址:
CSS list style樣式集錦
大家在寫網頁的時候，免不了寫ul li,並且很多人不喜歡自帶的li樣式，所以一般會將li的樣式設定為none,但是在有的時候，我們需要對一類資源進行編號，如新聞列表，部落格列表，商品列表等等，並且有的需要進行阿拉伯編號，有的需要字母編號，這時候如果自己手寫的話就麻煩了。沒錯，不要忘記list sty...
CSS 從熟悉到更熟悉
最近學習了css,乙個從熟悉到更熟悉的過程,來說說其中的收穫.css,好像在哪兒見過你 層疊樣式表 英文全稱 cascading style sheets 是一種用來表現html 標準通用標記語言的乙個應用 或xml 標準通用標記語言的乙個子集 等檔案樣式的計算機語言.css不僅可以靜態地修飾網頁,...
熟悉TheBeerHouse模板
才開始學，需要慢慢來，感覺不能糾纏於枝節的迷惑，先從解讀書本入手。未找到中譯本，翻譯摘錄一下以供同有所學的弟兄參考。chapter 1 專案介紹 thebeerhouse 記住 這是乙個以通用為目的，資料驅動，有基本內容風格的 它能容易的修改去適合於無數的實際的 需求。雖然我們用了很多舊的asp.n...