盡管我們對(duì)css已經(jīng)非常熟悉，應(yīng)付日常的工作或在各個(gè)瀏覽器中搞定css的兼容性已經(jīng)很得心應(yīng)手，但是并不是所有的css屬性都是那么的常用。在本文中，讓我們看看10個(gè)可能非常有用但是在該死的ie瀏覽器中(主要是ie6和ie7)卻不能使用的css屬性。看完了該文，你可能會(huì)更加討厭ie瀏覽器吧。
(請(qǐng)注意，本文發(fā)表時(shí)尚未測(cè)試這些屬性在ie8中的表現(xiàn)。我稍后會(huì)做一個(gè)測(cè)試頁(yè)面，用來(lái)測(cè)試這些屬性在所以ie瀏覽器中的表現(xiàn)。)
在調(diào)試css問(wèn)題的時(shí)候，我常常在指定元素上添加border來(lái)精確的查看該元素會(huì)發(fā)生什么并幫助確定問(wèn)題的來(lái)源。這常常是有效的，因?yàn)樗梢栽诓季稚辖o我更加具體的可視性。但是如果是塊級(jí)元素，這可能會(huì)發(fā)生某些錯(cuò)誤——在任何塊級(jí)元素上添加1px的邊框很可能會(huì)影響到布局，它會(huì)讓這個(gè)元素的寬度額外增加2px。
outline 屬性是完美的替代者，因?yàn)樗梢栽诓挥绊懳臋n流的情況下呈現(xiàn)該對(duì)象。但是ie6 和ie7 不支持 outline 屬性，所以，它不能在這兩個(gè)瀏覽器中用于調(diào)試。
在css開發(fā)中有很多這樣的例子：通過(guò)在特定元素上設(shè)置某些樣式來(lái)告訴該元素來(lái)“繼承”它父級(jí)元素的所有已添加的屬性，這樣你就可以避免相當(dāng)多的鍵盤輸入。
這可以通過(guò)設(shè)置 inherit 來(lái)很容易的實(shí)現(xiàn)。這可能很有用。比如，當(dāng)重寫 background 屬性的時(shí)候，常常會(huì)有很多的文字在該屬性中(色彩、圖片的url地址、位置等)。所以，與其重新寫這些值，你可能僅僅想要考慮中的元素和其父級(jí)元素有相同的背景屬性，一個(gè) inherit 值就可以搞定一切——這顯然大大的節(jié)省了鍵盤輸入。
不幸的是， inherit 值在ie6和ie7不被支持（除了用于 direction (文字方向) 和 visibility 屬性）。
某人說(shuō)，代碼就像女人的裙子——越短越好，看來(lái)ie會(huì)阻礙我們這個(gè)愿望的實(shí)現(xiàn)。
該屬性只用于table或者”display”屬性被設(shè)置為”table-cell”的元素。如果你動(dòng)態(tài)的為一個(gè)table添加內(nèi)容，就可能會(huì)遇到某個(gè)單元格的內(nèi)容為空的情況，然后你又不希望這個(gè)空的單元格的邊框、背景色、背景圖片等隱藏掉。
使用”empty-cells: hide”就能解決這個(gè)問(wèn)題，它會(huì)將可能出現(xiàn)這種情況的單元格完全隱藏掉。
internet explorer 不支持empty-cells屬性。
說(shuō)到table 的屬性，這個(gè)屬性用于聲明顯示在表格的側(cè)欄的表格標(biāo)題。它接受 top 、 bottom 、 left 和 right 四個(gè)值。internet exporer 不支持這個(gè)屬性，table的標(biāo)題在ie6和ie7中將總是出現(xiàn)在表格的頂部。
有序列表(<ol>)非常方便，因?yàn)樗梢允∪ツ闶止ぬ砑舆f增數(shù)字的麻煩，而且它允許你不用更改數(shù)字就能改變列表的序列。
css 擁有 counter-increment 和 counter-reset 屬性，它允許你用來(lái)自動(dòng)生成遞增數(shù)字到幾乎所有的html元素上，就像有序列表的效果一樣。
這里有個(gè)示例：
12 | h2 {counter-increment: headers;}h2:before {content: counter(headers) ". ";} |
上面的樣式將在所有的 <h2> 標(biāo)簽前面自動(dòng)添加遞增的數(shù)字，而且允許你在h2標(biāo)簽上實(shí)現(xiàn)和li標(biāo)簽同樣的的效果。
但是ie6, ie7 甚至safari(直到3.x版本)還不支持這些屬性。當(dāng)然，ie6也不支持:before 偽元素。
有時(shí)，一個(gè)網(wǎng)站的設(shè)計(jì)或布局結(jié)構(gòu)需要一個(gè)有固定高度的內(nèi)容區(qū)域，否則特定的視覺效果就會(huì)丟掉。這可能會(huì)因?yàn)橐粋€(gè)漸變背景、一個(gè)獨(dú)特的下拉列表、 或者可能是因?yàn)閜s出來(lái)的很酷的發(fā)光效果。但是有的時(shí)候，頁(yè)面中的內(nèi)容會(huì)比較多，而頁(yè)面卻不能像預(yù)期那樣展開。
這個(gè)時(shí)候就需要用到 min-height 屬性了，因?yàn)樗梢愿嬖V瀏覽器在一個(gè)特定的塊級(jí)元素上渲染最小的高度，不管內(nèi)容的實(shí)際高度是否達(dá)到了這個(gè)最小高度。然后呢，如果內(nèi)容超出了最小高度，該元素就會(huì)適度的擴(kuò)展開。
使用min-height 唯一需要注意到的是它在ie6中不被支持。我們都知道ie6在（緩慢的）退出歷史舞臺(tái)，但是有的客戶可能仍然要求他們的網(wǎng)站支持這個(gè)該死的瀏覽器。
不過(guò)令人高興的是，ie6 渲染 height 的值的方法正好和其它瀏覽器渲染“min-height”的方式一樣，所以你只需要一個(gè)針對(duì)ie6的hack或獨(dú)立的樣式表來(lái)為該元素添加特定的 height ，這個(gè)問(wèn)題就解決了。
ie6 同樣無(wú)視 min-width 、 max-height 和 max-width ， 但是上述方法在這些屬性上也是可行的。
從技術(shù)上來(lái)說(shuō)，:hover只是一個(gè)偽類，但是它在ie6中不被支持（ie7和ie8支持）。:hover偽類允許你在元素上添加任何的鼠標(biāo)經(jīng)過(guò)樣式。這非常有用，可以避免(至少在某種程度上)使用javascript。
但是如果你的網(wǎng)站，需要完全支持ie6，特別是在中國(guó)這種ie6一手遮天的情況下，那么你就必須考慮取消使用這個(gè)偽類，除非相關(guān)的標(biāo)簽有個(gè)”hred”屬性，比如<a>標(biāo)簽。而且如果要實(shí)現(xiàn)這種效果，可能必須借助于javascript和額外的樣式。
display 通常被設(shè)置為這三個(gè)值中的一個(gè)： block、inline和 none。“得益于”ie，display的其它值很少被用到。這些值包括 inline-block、table、inline-table和table-cell等，這些屬性對(duì)于解決一些特殊的布局問(wèn)題時(shí)，是很有用的。
所以，盡管ie 確實(shí)支持display的這三個(gè)基本屬性，但是它基本上不支持其它屬性。
其實(shí)，ie8對(duì)display的屬性支持已經(jīng)相當(dāng)完整了。不過(guò)，對(duì)于inline-block屬性，ie6/7只支持本身為inline的元素。
想了解更多關(guān)于display在各個(gè)瀏覽器中的支持情況，請(qǐng)查閱這里——神飛注
這是一個(gè)在特殊情況下能派上用場(chǎng)的很有趣的css屬性。它可能和不可預(yù)知的、動(dòng)態(tài)生成的內(nèi)容結(jié)合起來(lái)。簡(jiǎn)單來(lái)說(shuō)，這個(gè)屬性允許你在一個(gè)特定的元素上指定隱藏區(qū)域——也可以理解為，在一個(gè)絕對(duì)定位的元素中，按照一定的設(shè)置來(lái)裁剪該元素的顯示區(qū)域，超出該區(qū)域的內(nèi)容會(huì)被隱藏掉。語(yǔ)法看起來(lái)像這樣的：
1234567 | div.clipped { padding: 20px; width: 400px; height: 400px; clip: rect(20px, 300px, 200px, 100px); position: absolute; } |
修剪只能用于一個(gè)絕對(duì)定位的元素，而且只用使用矩形區(qū)域。括號(hào)內(nèi)的數(shù)字劃出的區(qū)域(200px*180px大小)為可見區(qū)域，該區(qū)域以外的內(nèi)容不可見或者被剪切掉。
技術(shù)上來(lái)講， clip 屬性被ie支持，但是只支持無(wú)逗號(hào)的語(yǔ)法，比如
1234567 | div.clipped { padding: 20px; width: 400px; height: 400px; clip: rect(20px 300px 200px 100px); position: absolute; } |
上面的樣式（rect后面括號(hào)里的屬性沒(méi)有用逗號(hào)隔開）在大多數(shù)瀏覽器下都可運(yùn)行，但是可能不會(huì)通過(guò)css驗(yàn)證，因?yàn)檎Z(yǔ)句沒(méi)有用逗號(hào)隔開。
這是另外一個(gè)偽類需要在這里被提及的，因?yàn)樗械姆莍e瀏覽器，都支持這個(gè)屬性。:focus偽類允許你聲明一個(gè)特別的樣式，當(dāng)一個(gè)頁(yè)面元素成為鍵盤(鼠標(biāo))焦點(diǎn)的時(shí)候，將該樣式動(dòng)態(tài)的應(yīng)用到該元素上。這在表單元素上非常有用，因?yàn)槟憧梢栽谝粋€(gè)輸入框被選中的時(shí)候給它添加一個(gè)邊框。
下面的樣式將在輸入框成為鍵盤焦點(diǎn)的時(shí)候添加一個(gè)紅色的邊框：
123 | input:focus { border: 1px solid #f00; } |
這就是本文的全部了，翻譯完成之后，神飛也受益匪淺，這10個(gè)屬性中，有我們常用的，更有我們不常用卻非常有用的——css學(xué)無(wú)止境。
新聞熱點(diǎn)
疑難解答
圖片精選
