煩人的IE相容今天給予完整的解答
阿新 • • 發佈:2018-11-02
做網站的時候煩人的就是IE的不相容,這也害苦了不知道多少的編碼師。今天海口網路公司易優小陸就為大家特地的講解一下網站的相容如何的解決。 特別是對完全使用DIV+CSS設計的網頁,就應該更注意IE6 IE7 FF對CSS樣式的相容,不然,你的網頁可能亂的一塌糊塗!我經常被這些東西整的焦頭爛額,於是呼在網上找了些資料,加上自己的理解和這些日子的經驗,整理了一些資料,其中有一些我還沒用到的和還不能理解的,就直接從別的地方給粘了過來,不知道有沒有錯誤,等我以後用到的時候慢慢改吧,希望對大家有點幫助! 什麼是瀏覽器相容:當我們使用不同的瀏覽器(Firefox IE7 IE6)訪問同一個網站,或者頁面的時候,會出現一些不相容的問題,在這種瀏覽器下顯示正常,在另一種下就亂了,我們在編寫CSS的時候會很惱火,剛修復了這個瀏覽器的問題,結果另外一個瀏覽器卻出了新問題。important (功能有限) 隨著IE7對!important的支援, !important 方法現在只針對IE6的相容.(注意寫法.記得該宣告位置需要提前.) 例如: #example { width: 100px !important; /* IE7+FF */ width: 200px; /* IE6 */ } 二、CSS HACK的方法(新手可以看看,高手就當路過吧) 首先需要知道的是: 所有瀏覽器 通用 height: 100px; IE6 專用 _height: 100px; IE7 專用 *+height: 100px; IE6、IE7 共用 *height: 100px; IE7、FF 共用 height: 100px !important; 例如: #example { height:100px; } /* FF */ * html #example { height:200px; } /* IE6 */ *+html #example { height:300px; } /* IE7 */ 下面的這種方法比較簡單 舉幾個例子: 1、IE6 - IE7+FF #example { height:100px; /* FF+IE7 */ _height:200px; /* IE6 */ } 其實這個用上面說的第一種方法也可以 #example { height:100px !important; /* FF+IE7 */ height:200px; /* IE6 */ } 2、IE6+IE7 - FF #example { height:100px; /* FF */ *height:200px; /* IE6+IE7 */ } 3、IE6+FF - IE7 #example { height:100px; /* IE6+FF */ *+height:200px; /* IE7 */ } 4、IE6 IE7 FF 各不相同 #example { height:100px; /* FF */ _height:200px; /* IE6 */ *+height:300px; /* IE7 */ } 或: #example { height:100px; /* FF */ *height:300px; /* IE7 */ _height:200px; /* IE6 */ } 需要注意的是,程式碼的順序一定不能顛倒了,要不又前功盡棄了。因為瀏覽器在解釋程式的時候,如果重名的話,會用後面的覆蓋前面的,就象給變數賦值一個道理,所以我們把通用的放前面,越專用的越放後面 解釋一下4的程式碼: 讀程式碼的時候,第一行height:100px; 大家都通用,IE6 IE7 FF 都顯示100px 到了第二行*height:300px; FF不認識這個屬性,IE6 IE7都認,所以FF還顯示100px,而IE6 IE7把第一行得到的height屬性給覆蓋了,都顯示300px 到了第三行_height:200px;只有IE6認識,所以IE6就又覆蓋了在第二行得到的height,顯示200px 這樣,三個瀏覽器都有自己的height屬性了,各玩各的去吧 這樣說要是你還不明白,要麼你去撞牆,要麼我去!不過還是你去比較好。 哦,差點忘了說了: *+html 對IE7的相容 必須保證HTML頂部。