十個非常實(shí)用的CSS屬性(IE不支持)

2024-07-11 08:27:38

字體：大中小

供稿：網(wǎng)友

對IE瀏覽器尤其是IE6的抱怨基本已進(jìn)入麻痹狀態(tài)，偶爾甚至產(chǎn)生非常消極的想法: 這個世界只有一個瀏覽器就好了，哪怕這唯一的瀏覽器就是IE6。當(dāng)然，這樣的想法是非常病態(tài)的，馬上打消。本文里面，介紹了10個很實(shí)但I(xiàn)E卻不支持的CSS屬性，列出這些屬性并不是為了數(shù)落IE(數(shù)落也沒用), 而是你了解了哪些CSS屬性是IE不支持的，就更有針對性的去編寫CSS和Hack了。
一、Outline
　　在調(diào)試CSS問題的時候，我常常在指定元素上添加border來精確的查看該元素會發(fā)生什么并幫助確定問題的來源。這常常是有效的，因?yàn)樗梢栽诓?局上給我更加具體的可視性。但是如果是塊級元素，這可能會發(fā)生某些錯誤——在任何塊級元素上添加1px的邊框很可能會影響到布局，它會讓這個元素的寬度額外增加2px。
　　outline 屬性是完美的替代者，因?yàn)樗梢栽诓挥绊懳臋n流的情況下呈現(xiàn)該對象。但是IE6 和IE7 不支持 outline 屬性，所以，它不能在這兩個瀏覽器中用于調(diào)試。
二、Inherit (值)
　　在CSS開發(fā)中有很多這樣的例子：通過在特定元素上設(shè)置某些樣式來告訴該元素來“繼承”它父級元素的所有已添加的屬性，這樣你就可以避免相當(dāng)多的鍵盤輸入。
　　這可以通過設(shè)置 inherit 來很容易的實(shí)現(xiàn)。這可能很有用。比如，當(dāng)重寫 background 屬性的時候，常常會有很多的文字在該屬性中(色彩、圖片的URL地址、位置等)。所以，與其重新寫這些值，你可能僅僅想要考慮中的元素和其父級元素有相同的背景屬性，一個 inherit 值就可以搞定一切——這顯然大大的節(jié)省了鍵盤輸入。
　　不幸的是， inherit 值在IE6和IE7不被支持（除了用于 direction (文字方向) 和 visibility 屬性）。
　　某人說，代碼就像女人的裙子——越短越好，看來IE會阻礙我們這個愿望的實(shí)現(xiàn)。
三、Empty-Cells
　　該屬性只用于table或者”display”屬性被設(shè)置為”table-cell”的元素。如果你動態(tài)的為一個table添加內(nèi)容，就可能會遇到某個單元格的內(nèi)容為空的情況，然后你又不希望這個空的單元格的邊框、背景色、背景圖片等隱藏掉。
　　使用”empty-cells: hide”就能解決這個問題，它會將可能出現(xiàn)這種情況的單元格完全隱藏掉。
　　Internet Explorer 不支持empty-cells屬性。
四、Caption-Side
　　說到table 的屬性，這個屬性用于聲明顯示在表格的側(cè)欄的表格標(biāo)題。它接受 top 、 bottom 、 left 和 right 四個值。Internet Exporer 不支持這個屬性，table的標(biāo)題在IE6和IE7中將總是出現(xiàn)在表格的頂部。
五、Counter-Increment / Counter-Reset
　　有序列表(<ol>)非常方便，因?yàn)樗梢允∪ツ闶止ぬ砑舆f增數(shù)字的麻煩，而且它允許你不用更改數(shù)字就能改變列表的序列。

上一篇：hr 樣式實(shí)現(xiàn)1px直線

下一篇：css 模擬表格斜線