瀏覽器兼容問題是指,不同廠商開發(fā)的瀏覽器針對同一段代碼的不同解析,
造成頁面展示效果出現(xiàn)差異的情況,很多時候為了追求顯示效果的一直,
前端開發(fā)人員就要針對不同兼容問題應用相應的方法處理,
達到效果一致的目的。
下面這些是平時開發(fā)過程中遇到的,做個匯總,方便查閱。
1、<!DOCTYPE HTML>文檔類型的聲明
產(chǎn)生條件:IE6瀏覽器,當我們沒有書寫這個文檔聲明的時候,
會觸發(fā)IE6瀏覽器的怪異解析現(xiàn)象;
解決辦法:書寫文檔聲明。
2、橫向雙外邊距
產(chǎn)生條件:在IE6中塊元素浮動后(左浮左margin,右浮右margin),
會出現(xiàn)橫向雙倍margin現(xiàn)象。
解決辦法:在float標簽的樣式控制中加入display:inline,
或者左幅右margin,右浮左margin。
3、默認行高
產(chǎn)生條件:IE6\IE7遨游瀏覽器;設置的文字高度超出盒模型內(nèi)容
區(qū)域設置的高度時會影響布局。
解決辦法:給超出高度的標簽設置overflow:hidden;
或?qū)⑽淖值男懈遧ine-height設置為小于塊的高度
4、不同瀏覽器當中,很多的標簽的默認樣式不同,如默認的外補丁內(nèi)補丁。
產(chǎn)生條件:不同瀏覽器
解決方法:利用CSS reset文件進行樣式的清除,然后在根據(jù)需要進行設置。
5、img外部的border
產(chǎn)生條件:img外部有a標簽,即img標簽有鏈接時
解決辦法:設置img邊框border:0;
6、經(jīng)典3像素bug
產(chǎn)生條件:IE6瀏覽器,浮動塊元素與未浮動塊元素處于同一行,有默認的3px間距。
解決辦法:設置非浮動元素浮動。
7、png格式圖片
產(chǎn)生條件:IE6瀏覽器,不支持透明;
解決辦法:使用JavaScript進行處理;或者使用GIF、JPG圖像替代掉png圖片的使用。
8、默認行高
產(chǎn)生條件:清浮動的時候,有些人會采取一種清浮動的方法,使用一個空的div,
然后為這個div設置{clear:both}。在大部分瀏覽器當中,這樣做是沒有任何問題的,
但是在IE6瀏覽器當中,div即使是空的,也會存在默認行高。
解決方法:設置其高度為0,并設置overflow:hidden。{height:0;
overflow:hidden;clear:both;}