瀏覽器兼容性總結(jié)

瀏覽器的兼容性問題,通常是因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析,造成頁面顯示不統(tǒng)一的情況。

1.最主要也是最常見的,就是瀏覽器對(duì)標(biāo)簽的默認(rèn)樣式的解析不一致,所以我們要統(tǒng)一,就要進(jìn)行樣式重置,最簡單的初始化方法是
*{margin:0; padding:0;}
2.上下margin重合問題,相鄰的兩個(gè)div margin-left margin-right 不會(huì)重合,但相鄰的margin-top margin-bottom會(huì)重合。
解決方法:
(1)margin改為padding
(2)絕對(duì)定位position:absolute;
3.有些瀏覽器解析img標(biāo)簽也有不同,img是行內(nèi)元素,一般都會(huì)緊接著排放,但是在有些情況下還是會(huì)突然出現(xiàn)個(gè)間距,解決辦法是給它來個(gè)浮動(dòng) float
4.標(biāo)簽屬性min-height是不兼容的,所以使用的時(shí)候也要稍微改改。
.box{min-height:100px;height:auto !important; height:100px; overflow:visible;}
5.很多時(shí)候可能會(huì)納悶超鏈接訪問過后,樣式就混亂了,hover樣式不出現(xiàn)了。其實(shí)主要是其CSS屬性的排序問題。一般來說,最好按照這個(gè)順序:L-V-H-A
a:link{} a:visited{} a:hover{} a:active{}
6.chrome下默認(rèn)會(huì)將小于12px的文本強(qiáng)制按照12px來解析。解決辦法是給其添加屬性:
-webkit-text-size-adjust: none;
7.因?yàn)榇嬖趦煞N盒子模式:IE盒子模式和W3C標(biāo)準(zhǔn)模式,所以對(duì)象的實(shí)際寬度也要注意。
IE/Opera:對(duì)象的實(shí)際寬度 = (margin-left) + width + (margin-right)
Firefox/Mozilla:對(duì)象的實(shí)際寬度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)
8.鼠標(biāo)的手勢(shì)也有問題:FireFox的cursor屬性不支持hand,但是支持pointer,IE兩個(gè)都支持;所以為了兼容都用pointer
9.消除ul、ol等列表的縮進(jìn)時(shí),樣式應(yīng)寫成:list-style:none;margin:0px;padding:0px; 其中margin屬性對(duì)IE有效,padding屬性對(duì)FireFox有效
10.CSS控制透明度問題:一般就直接 opacity: 0.6 ; IE就 filter: alpha(opacity=60);
10.有些時(shí)候圖片下方會(huì)出現(xiàn)一條間隙,一般給img添加vertical-align屬性即可,比如top middle img{verticle-align:center;}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容