你對DIV＋CSS設計IE6、IE7、Firefox兼容性問題是否比較熟悉，這裡和大家分享一下，對完全使用DIV+CSS設計的網頁，就應該更注意IE6、IE7、Firefox對CSS樣式的兼容。
DIV＋CSS設計IE6、IE7、Firefox兼容性
DIV＋CSS網頁布局這是一種趨勢,我也開始順應這股趨勢了,不過在使用DIV＋CSS網站設計的時候，應該注意css樣式兼容不同浏覽器問題，特別是對完全使用DIV+CSS設計的網頁，就應該更注意IE6、IE7、Firefox對CSS樣式的兼容，不然，你的網頁可能亂的一塌糊塗！我經常被這些東西整的焦頭爛額,於是乎在網上找了些資料,加上自己的理解和這些日子的經驗,整理了一些資料,其中有一些我還沒用到的和還不能理解的,就直接從別的地方給粘了過來,不知道有沒有錯誤,等我以後用到的時候慢慢改吧,希望對大家有點幫助!
什麼是浏覽器兼容：當我們使用不同的浏覽器（FirefoxIE7IE6）訪問同一個網站，或者頁面的時候，會出現一些不兼容的問題，在這種浏覽器下顯示正常，在另一種下就亂了，我們在編寫CSS的時候會很惱火，剛修復了這個浏覽器的問題，結果另外一個浏覽器卻出了新問題。好吧，我服了行吧，那我就利用你們的不兼容各寫一段CSS,讓他們各執行各的，這下總該你沒脾氣了吧，呵呵。
一、!important(功能有限)
隨著IE7對!important的支持,!important方法現在只針對IE6的兼容.(注意寫法.記得該聲明位置需要提前.)
例如:
- #example{
- width:100px!important;/*IE7+Firefox*/
- width:200px;/*IE6*/
- }
二、CSSHACK的方法
首先需要知道的是：
所有浏覽器通用height:100px;
IE6專用_height:100px;
IE7專用*+height:100px;
IE6、IE7共用*height:100px;
IE7、Firefox共用height:100px!important;
例如：
- #example{height:100px;}/*Firefox*/
- *Html#example{height:200px;}/*IE6*/
- *+Html#example{height:300px;}/*IE7*/
下面的這種方法比較簡單
舉幾個例子：
1、IE6-IE7+Firefox
- #example{
- height:100px;/*Firefox+IE7*/
- _height:200px;/*IE6*/
- }
- 其實這個用上面說的第一種方法也可以
- #example{
- height:100px!important;/*Firefox+IE7*/
- height:200px;/*IE6*/
- }
2、IE6+IE7-Firefox
- #example{
- height:100px;/*Firefox*/
- *height:200px;/*IE6+IE7*/
- }
3、IE6+Firefox-IE7
- #example{
- height:100px;/*IE6+Firefox*/
- *+height:200px;/*IE7*/
- }
4、IE6IE7Firefox各不相同
- #example{
- height:100px;/*Firefox*/
- _height:200px;/*IE6*/
- *+height:300px;/*IE7*/
- }
- 或：
- #example{
- height:100px;/*Firefox*/
- *height:300px;/*IE7*/
- _height:200px;/*IE6*/
- }
需要注意的是，代碼的順序一定不能顛倒了，要不又前功盡棄了。因為浏覽器在解釋程序的時候，如果重名的話，會用後面的覆蓋前面的，就象給變量賦值一個道理，所以我們把通用的放前面，越專用的越放後面。
解釋一下4的代碼：
讀代碼的時候，第一行height:100px;大家都通用，IE6IE7Firefox都顯示100px
到了第二行*height:300px;Firefox不認識這個屬性，IE6IE7都認，所以Firefox還顯示100px，而IE6IE7把第一行得到的height屬性給覆蓋了，都顯示300px
到了第三行_height:200px;只有IE6認識，所以IE6就又覆蓋了在第二行得到的height,最終顯示200px
這樣，三個浏覽器都有自己的height屬性了，各玩各的去吧
這樣說要是你還不明白，要麼你去撞牆，要麼我去!不過還是你去比較好。
哦，差點忘了說了：
*+html對IE7的兼容必須保證Html頂部有如下聲明：
- "http://www.w3.org/TR/Html4/loose.dtd">