十個實用且常用但是IE卻不支援的CSS屬性

對IE瀏覽器尤其是IE6的抱怨基本已進入麻痹狀態，偶爾甚至產生非常消極的想法：這個世界只有一個瀏覽器就好了，哪怕這唯一的瀏覽器就是IE6。當然，這樣的想法是非常病態的，馬上打消。本文裡面，介紹了10個很實但IE卻不支援的CSS屬性，列出這些屬性並不是為了數落IE(數落也沒用)，而是你瞭解了哪些CSS屬性是IE不支援的，就更有針對性的去編寫CSS和Hack了。

1. Outline

在調試CSS問題的時候，我常常在指定元素上添加border來精確的查看該元素會發生什麼並協助確定問題的來源。這常常是有效，因為它可以在布 局上給我更加具體的可視性。但是如果是區塊層級元素，這可能會發生某些錯誤——在任何區塊層級元素上添加1px的邊框很可能會影響到布局，它會讓這個元素的寬度額 外增加2px。

outline 屬性是完美的替代者，因為它可以在不影響文檔流的情況下呈現該對象。但是IE6 和IE7 不支援 outline 屬性，所以，它不能在這兩個瀏覽器中用於調試。

2. Inherit (值)

在CSS開發中有很多這樣的例子：通過在特定元素上設定某些樣式來告訴該元素來“繼承”它父級元素的所有已添加的屬性，這樣你就可以避免相當多的鍵盤輸入。

這可以通過設定 inherit 來很容易的實現。這可能很有用。比如，當重寫 background 屬性的時候，常常會有很多的文字在該屬性中(色彩、圖片的URL地址、位置等)。所以，與其重新寫這些值，你可能僅僅想要考慮中的元素和其父級元素有相同 的背景屬性，一個 inherit 值就可以搞定一切——這顯然大大的節省了鍵盤輸入。

不幸的是， inherit 值在IE6和IE7不被支援（除了用於 direction (文字方向) 和 visibility 屬性）。

某人說，代碼就像女人的裙子——越短越好，看來IE會阻礙我們這個願望的實現。

3. Empty-Cells

該屬性只用於table或者”display”屬性被設定為”table-cell”的元素。如果你動態為一個table新增內容，就可能會遇到某個儲存格的內容為空白的情況，然後你又不希望這個空的儲存格的邊框、背景色、背景圖片等隱藏掉。

使用”empty-cells: hide”就能解決這個問題，它會將可能出現這種情況的儲存格完全隱藏掉。

Internet Explorer 不支援empty-cells屬性。

4. Caption-Side

說到table 的屬性，這個屬性用於聲明顯示在表格的側欄的表格標題。它接受 top 、 bottom 、 left 和 right 四個值。Internet Exporer 不支援這個屬性，table的標題在IE6和IE7中將總是出現在表格的頂部。

5. Counter-Increment / Counter-Reset

有序列表(<ol>)非常方便，因為它可以省去你手工添加遞增數位麻煩，而且它允許你不用更改數字就能改變列表的序列。

CSS 擁有 counter-increment 和 counter-reset 屬性，它允許你用來自動產生遞增數字到幾乎所有的html元素上，就像有序列表的效果一樣。

這裡有個樣本：

h2 {counter-increment: headers;}h2:before {content: counter(headers) ". ";}

上面的樣式將在所有的 <h2> 標籤前面自動添加遞增的數字，而且允許你在h2標籤上實現和li標籤同樣的的效果。

但是IE6, IE7 甚至Safari(直到3.x版本)還不支援這些屬性。當然，IE6也不支援:before 虛擬元素。

6. Min-Height

有時，一個網站的設計或布局結構需要一個有固定高度的內容地區，否則特定的視覺效果就會丟掉。這可能會因為一個漸層背景、一個獨特的下拉式清單、 或者可能是因為PS出來的很酷的光暈效果。但是有的時候，頁面中的內容會比較多，而頁面卻不能像預期那樣展開。

這個時候就需要用到 min-height 屬性了，因為它可以告訴瀏覽器在一個特定的區塊層級元素上渲染最小的高度，不管內容的實際高度是否達到了這個最小高度。然後呢，如果內容超出了最小高度，該元素就會適度的擴充開。

使用min-height 唯一需要注意到的是它在IE6中不被支援。我們都知道IE6在（緩慢的）退出曆史舞台，但是有的客戶可能仍然要求他們的網站支援這個該死的瀏覽器。

不過令人高興的是，IE6 渲染 height 的值的方法正好和其它瀏覽器渲染“min-height”的方式一樣，所以你只需要一個針對IE6的hack或獨立的樣式表來為該元素添加特定的 height ，這個問題就解決了。

IE6 同樣無視 min-width 、 max-height 和 max-width ， 但是上述方法在這些屬性上也是可行的。

7. :hover

從技術上來說，:hover只是一個偽類，但是它在IE6中不被支援（IE7和IE8支援）。:hover偽類允許你在元素上添加任何的滑鼠經過樣式。這非常有用，可以避免(至少在某種程度上)使用javascript。

但是如果你的網站，需要完全支援IE6，特別是在中國這種IE6一手遮天的情況下，那麼你就必須考慮取消使用這個偽類，除非相關的標籤有個”href”屬性，比如<a>標籤。而且如果要實現這種效果，可能必須藉助於javascript和額外的樣式。

8. Display

Display 通常被設定為這三個值中的一個： block、inline和 none。“得益於”IE，Display的其它值很少被用到。這些值包括 inline-block、table、inline-table和table-cell等，這些屬性對於解決一些特殊的布局問題時，是很有用的。

所以，儘管IE 確實支援Display的這三個基本屬性，但是它基本上不支援其它屬性。

其實，IE8對display的屬性支援已經相當完整了。不過，對於inline-block屬性，IE6/7隻支援本身為inline的元素。

9. Clip

這是一個在特殊情況下能派上用場的很有趣的CSS屬性。它可能和不可預知的、動態產生的內容結合起來。簡單來說，這個屬性允許你在一個特定的元素上 指定隱藏地區——也可以理解為，在一個絕對位置的元素中，按照一定的設定來裁剪該元素的顯示地區，超出該地區的內容會被隱藏掉。文法看起來像這樣的：

p.clipped {         padding: 20px;         width: 400px;         height: 400px;         clip: rect(20px, 300px, 200px, 100px);         position: absolute;}

修剪只能用於一個絕對位置的元素，而且只用使用矩形地區。括弧內的數字划出的地區(200px*180px大小)為可見地區，該地區以外的內容不可見或者被剪下掉。

技術上來講， clip 屬性被IE支援，但是只支援無逗號的文法，比如

p.clipped {padding: 20px;width: 400px;height: 400px;clip: rect(20px 300px 200px 100px);position: absolute;}

上面的樣式（rect後面括弧裡的屬性沒有用逗號隔開）在大多數瀏覽器下都可運行，但是可能不會通過CSS驗證，因為語句沒有用逗號隔開。

10. :focus

這是另外一個偽類需要在這裡被提及的，因為所有的非IE瀏覽器，都支援這個屬性。:focus偽類允許你聲明一個特別的樣式，當一個頁面元素成為鍵 盤(滑鼠)焦點的時候，將該樣式動態應用到該元素上。這在表單元素上非常有用，因為你可以在一個輸入框被選中的時候給它添加一個邊框。

下面的樣式將在輸入框成為鍵盤焦點的時候添加一個紅色的邊框：

input:focus {        border: 1px solid #f00;}