你對CSS屬性的用法是否比較熟悉，這里和大家分享一下十大很實但IE卻不支持的CSS屬性，通過對這些IE不支持的CSS屬性的學習，我們就可以更有針對性的去編寫CSS和Hack了。

十個非常實用但不被IE支持的CSS屬性

在51cto.com中介紹了很多CSS屬性知識，也有很多DIV CSS布局實例。對IE瀏覽器尤其是IE6的抱怨基本已進入麻痹狀態，偶爾甚至產生非常消極的想法:這個世界只有一個瀏覽器就好了，哪怕這唯一的瀏覽器就是IE6。當然，這樣的想法是非常病態的，馬上打消。本文里面介紹了10個很實但IE卻不支持的CSS屬性，列出這些屬性并不是為了數落IE(數落也沒用),而是你了解了哪些CSS屬性是IE不支持的，就更有針對性的去編寫CSS和Hack了。

一、CSS屬性之Outline

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

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

二、CSS屬性之Inherit(值)

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

　　這可以通過設置inherit來很容易的實現。這可能很有用。比如，當重寫background屬性的時候，常常會有很多的文字在該屬性中(色彩、圖片的URL地址、位置等)。所以，與其重新寫這些值，你可能僅僅想要考慮中的元素和其父級元素有相同的背景屬性，一個inherit值就可以搞定一切——這顯然大大的節省了鍵盤輸入。
　　不幸的是，inherit值在IE6和IE7不被支持（除了用于direction(文字方向)和visibility屬性）。
　　某人說，代碼就像女人的裙子——越短越好，看來IE會阻礙我們這個愿望的實現。

三、CSS屬性之Empty-Cells

　　該屬性只用于table或者”display”屬性被設置為”table-cell”的元素。如果你動態的為一個table添加內容，就可能會遇到某個單元格的內容為空的情況，然后你又不希望這個空的單元格的邊框、背景色、背景圖片等隱藏掉。
　　使用”empty-cells:hide”就能解決這個問題，它會將可能出現這種情況的單元格完全隱藏掉。
　　InternetExplorer不支持empty-cells屬性。#p#

四、CSS屬性之Caption-Side

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

五、CSS屬性之Counter-Increment/Counter-Reset

　　有序列表(

)非常方便，因為它可以省去你手工添加遞增數字的麻煩，而且它允許你不用更改數字就能改變列表的序列。
　　CSS擁有counter-increment和counter-reset屬性，它允許你用來自動生成遞增數字到幾乎所有的HTML元素上，就像有序列表的效果一樣。
　　這里有個示例：

ExampleSourceCode 

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

　　上面的樣式將在所有的

標簽前面自動添加遞增的數字，而且允許你在h2標簽上實現和li標簽同樣的的效果。
　　但是IE6,IE7甚至Safari(直到3.x版本)還不支持這些屬性。當然，IE6也不支持:before偽元素。

六、CSS屬性之Min-Height

　　有時，一個網站的設計或布局結構需要一個有固定高度的內容區域，否則特定的視覺效果就會丟掉。這可能會因為一個漸變背景、一個獨特的下拉列表、或者可能是因為PS出來的很酷的發光效果。但是有的時候，頁面中的內容會比較多，而頁面卻不能像預期那樣展開。
　　這個時候就需要用到min-height屬性了，因為它可以告訴瀏覽器在一個特定的塊級元素上渲染最小的高度，不管內容的實際高度是否達到了這個最小高度。然后呢，如果內容超出了最小高度，該元素就會適度的擴展開。

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

　　不過令人高興的是，IE6渲染height的值的方法正好和其它瀏覽器渲染“min-height”的方式一樣，所以你只需要一個針對IE6的hack或獨立的樣式表來為該元素添加特定的height，這個問題就解決了。
　　IE6同樣無視min-width、max-height和max-width，但是上述方法在這些屬性上也是可行的。

七、CSS屬性之:hover

　　從技術上來說，:hover只是一個偽類，但是它在IE6中不被支持（IE7和IE8支持）。:hover偽類允許你在元素上添加任何的鼠標經過樣式。這非常有用，可以避免(至少在某種程度上)使用JavaScript。
　　但是如果你的網站，需要完全支持IE6，特別是在中國這種IE6一手遮天的情況下，那么你就必須考慮取消使用這個偽類，除非相關的標簽有個”href”屬性，比如標簽。而且如果要實現這種效果，可能必須借助于javascript和額外的樣式。#p#

八、CSS屬性之Display

　　Display通常被設置為這三個值中的一個：block、inline和none?！暗靡嬗凇盜E，Display的其它值很少被用到。這些值包括inline-block、table、inline-table和table-cell等，這些屬性對于解決一些特殊的布局問題時，是很有用的。
　　所以，盡管IE確實支持Display的這三個基本屬性，但是它基本上不支持其它屬性。
　　其實，IE8對display的屬性支持已經相當完整了。不過，對于inline-block屬性，IE6/7只支持本身為inline的元素。

九.CSS屬性之Clip

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

ExampleSourceCode 

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

　　修剪只能用于一個絕對定位的元素，而且只用使用矩形區域。括號內的數字劃出的區域(200px*180px大小)為可見區域，該區域以外的內容不可見或者被剪切掉。
　　技術上來講，clip屬性被IE支持，但是只支持無逗號的語法，比如

ExampleSourceCode 

div.clipped{  
padding:20px;  
width:400px;  
height:400px;  
clip:rect(20px300px200px100px);  
position:absolute;  
}  
 

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

十、CSS屬性之:focus

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

ExampleSourceCode 

input:focus{  
border:1pxsolid#f00;  
}  
 

【編輯推薦】

1. 應用CSS屬性 實現WEB頁面強制分頁打印
2. 十個不被IE6支持的實用CSS屬性
3. 專家推薦三大“頂級”CSS技巧！
4. 探究網頁布局中CSS無效的十個常見原因
5. DIV CSS初學者必須掌握的10個問題與技巧