中(zhōng)山中(zhōng)山

探知(zhī) • 創造美好

不斷超越客戶的期望值,源自我(wǒ)們對這個行業的熱愛

煩人的IE兼容今天給予完整的解答

來源:https://www.zpqxrif.com| 2018-10-06 13:53:03

做網站的時候煩人的就是IE的不兼容,這也害苦了不知(zhī)道多少的編碼師。

今天東莞網絡公司向揚網絡小(xiǎo)陸就爲大(dà)家特地的講解一(yī)下(xià)網站的兼容如何的解決。
特别是對完全使用DIV+CSS設計的網頁,就應該更注意IE6 IE7 FF對CSS樣式的兼容,不然,你的網頁可能亂的一(yī)塌糊塗!我(wǒ)經常被這些東西整的焦頭爛額,于是呼在網上找了些資(zī)料,加上自己的理解和這些日子的經驗,整理了一(yī)些資(zī)料,其中(zhōng)有一(yī)些我(wǒ)還沒用到的和還不能理解的,就直接從别的地方給粘了過來,不知(zhī)道有沒有錯誤,等我(wǒ)以後用到的時候慢(màn)慢(màn)改吧,希望對大(dà)家有點幫助!什麽是浏覽器兼容:當我(wǒ)們使用不同的浏覽器(Firefox IE7 IE6)訪問同一(yī)個網站,或者頁面的時候,會出現一(yī)些不兼容的問題,在這種浏覽器下(xià)顯示正常,在另一(yī)種下(xià)就亂了,我(wǒ)們在編寫CSS的時候會很惱火(huǒ),剛修複了這個浏覽器的問題,結果另外(wài)一(yī)個浏覽器卻出了新問題。important (功能有限)
随着IE7對!important的支持, !important 方法現在隻針對IE6的兼容.(注意寫法.記得該聲明位置需要提前.)
例如:
#example {
width: 100px !important; /* IE7+FF */
width: 200px; /* IE6 */
}
二、CSS HACK的方法(新手可以看看,高手就當路過吧)
首先需要知(zhī)道的是:
所有浏覽器 通用 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 */
下(xià)面的這種方法比較簡單
舉幾個例子:
1、IE6 - IE7+FF
#example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
其實這個用上面說的第一(yī)種方法也可以
#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 */
}
需要注意的是,代碼的順序一(yī)定不能颠倒了,要不又(yòu)前功盡棄了。因爲浏覽器在解釋程序的時候,如果重名的話(huà),會用後面的覆蓋前面的,就象給變量賦值一(yī)個道理,所以我(wǒ)們把通用的放(fàng)前面,越專用的越放(fàng)後面
解釋一(yī)下(xià)4的代碼:
讀代碼的時候,第一(yī)行height:100px; 大(dà)家都通用,IE6 IE7 FF 都顯示100px
到了第二行*height:300px; FF不認識這個屬性,IE6 IE7都認,所以FF還顯示100px,而IE6 IE7把第一(yī)行得到的height屬性給覆蓋了,都顯示300px
到了第三行_height:200px;隻有IE6認識,所以IE6就又(yòu)覆蓋了在第二行得到的height,顯示200px
這樣,三個浏覽器都有自己的height屬性了,各玩各的去(qù)吧
這樣說要是你還不明白(bái),要麽你去(qù)撞牆,要麽我(wǒ)去(qù)!不過還是你去(qù)比較好。
哦,差點忘了說了:
*+html 對IE7的兼容 必須保證HTML頂部有如下(xià)聲明:





煩人的IE兼容今天給予完整的解答由東莞網站設計編輯 /zhongshan/1029.html如需轉載請注明出處

動态網站建設 雲浮網站建設 陽江網站建設 專業網站建設 潮州網站建設 珠海網站建設 東莞網站優化 東莞網站制作 東莞網站開(kāi)發 東莞建網站 東莞建站費(fèi)用 東莞網站建設 東莞做網站 東莞網站改版

多一(yī)份參考,總有益處