IE7.0出來了，對CSS的支援又有新問題。瀏覽器多了，網頁相容性更差了，疲於奔命的還是我們，為解決IE7.0的相容問題，找來了下面這篇文章：
引用內容
現在我大部分都是用!important來hack，對於ie6和firefox測試可以正常顯示，但是ie7對!important可以正確解釋，會導 致頁面沒按要求顯示！搜尋了一下，找到一個針對IE7不錯的hack方式就是使用“*+html”，現在用IE7瀏覽一下，應該沒有問題了。
現在寫一個CSS可以這樣：
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
那麼在firefox下字型顏色顯示為#333，IE6下字型顏色顯示為#666，IE7下字型顏色顯示為#999，他們都互不干擾。我真希望那個垃圾的IE6快點退休。。。。
css Hacks,css樣式表補丁.用於修正XHTML編碼設計的網頁模板布局,某些層的溢出問題,HACKS出處:[url] www.webdevout.net[/url],這個CSS補丁(hacks)很簡單,在樣式表中單獨為ie7設定某個元素,id或者class前面這 樣寫:
*:first-child+html #ID{}
或者
*:first-child+html .class{}
別忘掉了前面的*,這個hacks使得DIV+CSS網頁模板在ie5+,ie6,ie7,firefox 1.5,firefox 2的瀏覽器中都可以完美體現原始布局,而不會出現層溢出等問題.
IE7 修複了很多 bug，也增加了對一些選擇符的支援，所以現在諸如 *html {} 和 html>body {} 等針對 IE 隱藏或顯示的 hack 都會在 IE7 中失效。雖然 CSS Hack 不推薦使用，條件注釋才是萬無一失的過濾器，但是條件注釋只能出現在 HTML 中，CSS Hack 還是有用武之地的。Nanobot 發現了一些針對 IE7 的 CSS Hack，具體就是：
>body
html*
*+html
這三種寫法，其中前兩種都是不合法的 CSS 寫法，在標準相容瀏覽器中被被忽略，但是 IE7 卻不這麼認為。對於 >body ，它會將缺失的選擇符用全域選擇符 * 代替，也就是將其處理成了 *>body，而且不光對於 > 選擇符，+,~ 選擇符中這個現象也存在。對於 html* ，由於 html 和 * 之間沒有空格，所以也是一種 CSS 語法錯誤，但 IE7 不會忽略，而是錯誤地認為這裡有一個空格。對於第三種 *+html，IE7 認為 html 前面的 DTD 聲明也是一個元素，所以 html 會被選中，這三種方法中只有這一種方法是合法的 CSS 寫法，也就是說可以通過校正器的驗證，因此也是作者推薦的 hack 用法。
最後作者給出了最佳方式：
IE 6 and below
Use * html {} to select the html element.
IE 7 and below
Use *+html, * html {} to select the html element.
IE 7 only
Use *+html {} to select the html element.
IE 7 and modern browsers only
Use html>body {} to select the body element.
Modern browsers only (not IE 7)
Use html>/**/body {} to select the body element.
The IE7 CSS Hack(!important在ie7.0的hack方法)
由於ie對!important識別存在bug,而現在大部分網頁標準設計師又通過這個bug來相容ie和ff,但是ie7.0把這個bug給修複了,所 以問題又出現了,怎麼相容ie.7.0的同時又能相容ie6.0和ff?正所謂"上有政策,下有對策",國外的網頁標準設計師通過使用css filter的辦法(並不是css hack)來相容ie7.0,ie6.0和ff,以下為作者從國外網站的翻譯.
建立一個css樣式如下：
插入代碼：
#item {
width: 200px;
height: 200px;
background: red;
}
建立一個div,並使用前面定義的css的樣式：
插入代碼：
<div id="item">some text here</div>
在body表現這裡加入lang屬性,中文為zh：
插入代碼：
<body lang="en">
現在對div元素再定義一個樣式：
插入代碼：
[/code]
*:lang(en) #item{
background:green !important;
}
[/code]
這樣做是為了用!important覆蓋原來的css樣式,由於:lang選取器ie7.0並不支援,所以對這句話不會有任何作用,於是也達到了ie6.0下同樣的效果,但是很不幸地的是,safari同樣不支援此屬性,所以需要加入以下css樣式：
插入代碼：
#item:empty {
background: green !important
}
:empty選取器為css3的規範,儘管safari並不支援此規範,但是還是會選擇此元素,不管是否此元素存在,現在綠色會現在在除ie各版本以外的瀏覽器上,並在以下瀏覽器和作業系統下通過測試：
ie7 beta 2 preview/win
ie5.01+/win
firefox 1.5/win
opera 8.5/win & linux
netscape 7.01, 8/win
mozilla 1.7.12/win & linux
safari 2/mac
firefox 1.0.4/linux
epiphany 1.4.8/linux
galeon 1.3.20/linux
Screenshot of the IE7 css hack in IE7
Screenshot of the IE7 css hack in Firefox 1.5
按照遠作者的說法其實這不能算是一種hack,應該屬於filter,不過這似乎並不是最重要的,因為通過這個辦法,我們又一次瞭解決IE6.0,IE7.0和其他瀏覽器之間的相容性問題,而且使用:lang-filter這辦法,在今後的一段時間內都會有用.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
