10個很有用但是IE瀏覽器不支援的CSS屬性
儘管我們對CSS已經非常熟悉,應付日常的工作或在各個瀏覽器中搞定CSS的相容性已經很得心應手,但是並不是所有的CSS屬性都是那麼的常用。在本文中,讓我們看看10個可能非常有用但是在該死的IE瀏覽器中(主要是IE6和IE7)卻不能使用的CSS屬性。看完了該文,你可能會更加討厭IE瀏覽器吧。
(請注意,本文發表時尚未測試這些屬性在IE8中的表現。我稍後會做一個測試頁面,用來測試這些屬性在所以IE瀏覽器中的表現。)
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標籤上實現和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
的元素。
想了解更多關於Display
在各個瀏覽器中的支援情況,請查閱這裡——神飛注
9. Clip
這是一個在特殊情況下能派上用場的很有趣的CSS屬性。它可能和不可預知的、動態生成的內容結合起來。簡單來說,這個屬性允許你在一個特定的元素上指定隱藏區域——也可以理解為,在一個絕對定位的元素中,按照一定的設定來裁剪該元素的顯示區域,超出該區域的內容會被隱藏掉。語法看起來像這樣的:
div.clipped {
padding: 20px;
width: 400px;
height: 400px;
clip: rect(20px, 300px, 200px, 100px);
position: absolute;
}
修剪只能用於一個絕對定位的元素,而且只用使用矩形區域。括號內的數字劃出的區域(200px*180px大小)為可見區域,該區域以外的內容不可見或者被剪下掉。
技術上來講, clip 屬性被IE支援,但是隻支援無逗號的語法,比如
div.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; }
以下內容為前端觀察自己新增,與英文原文無關。@05-25-2009
11. opacity
opacity
也是一個非常有用的屬性,目前該屬性在各個非IE瀏覽器都得到了良好的支援,包括FF也將在3.5版本中增強對opacity
的支援,替換掉-moz-opacity
(目前FF的opacity會自動繼承到子元素)。但是在IE下,你不得不使用IE私有的濾鏡來實現。
12. RGBa
RGBa色彩可以很方便的實現透明色彩,包括字型顏色、背景顏色和邊框顏色等,都可以使用RGBa來實現色彩的透明效果。該屬性在所有(A級)非IE瀏覽器下都已經被支援了,唯有IE不行。檢視RGBa色彩的瀏覽器支援 。