常見(jiàn)瀏覽器兼容問(wèn)題有哪些

小編給大家分享一下 常見(jiàn)瀏覽器兼容問(wèn)題有哪些,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

網(wǎng)站的建設(shè)成都創(chuàng)新互聯(lián)公司專注網(wǎng)站定制,經(jīng)驗(yàn)豐富,不做模板,主營(yíng)網(wǎng)站定制開(kāi)發(fā).小程序定制開(kāi)發(fā),H5頁(yè)面制作!給你煥然一新的設(shè)計(jì)體驗(yàn)!已為PVC花箱等企業(yè)提供專業(yè)服務(wù)。


常見(jiàn)瀏覽器兼容問(wèn)題:
1.li在IE中底部3像素的BUG。解決方案:在< li>上加float:left;即可解決
2. IE6中奇數(shù)寬高的BUG。解決方案:就是將外部相對(duì)定位的div寬度改成偶數(shù)。高度也是一樣的。
3. IE6文字溢出BUG。引發(fā)這種BUG有以下幾個(gè)條件:
1)是注釋引起的,刪除所有注釋即可。
2)hidden的input直接放在form下。
3)display為none的div也有可能引發(fā)此bug。
4)可以通過(guò)外面再包一次DIV解決。
由注釋造成文字溢出,屬于IE6的BUG,溢出文字的字?jǐn)?shù)=注釋的條數(shù)*2-1,這里的字?jǐn)?shù)在中文或英文數(shù)字時(shí)都成立。注釋坐在位置與溢出位置、區(qū)塊的浮動(dòng)以及文字區(qū)塊的固定寬度有必然聯(lián)系。常見(jiàn)瀏覽器兼容問(wèn)題有哪些
解決辦法:
1)不放置注釋。最簡(jiǎn)單、最快捷的解決方法;
2)注釋不要放置于2個(gè)浮動(dòng)的區(qū)塊之間;
3)將文字區(qū)塊包含在新的< div>< /div>之間,如:<divstyle=”float:right;width:400px”>< div>↓這就是多出來(lái)的那只豬< /div>< /div>;
4)去除文字區(qū)塊的固定寬度,與3有相似之處;
5)在后面加一個(gè)< br/>或者空格;(不推薦)
6)使用IE注釋格式,如:<!–[if!IE]>Put your commentary in here…<![endif]–>。
7)給盒子加position:relative;屬性
4. 樣式中文注釋后引發(fā)失效。
滿足下面條件就會(huì)引起 注釋下面的樣式不起作用:
1)css有中文注釋。
2)css為ANSI編碼。
3) html為utf-8編碼。
解決方法:
1) 去掉中文注釋,用英文注釋。
2.)統(tǒng)一css 和 html 的編碼。
建議采用第二種解決方法:ps: css為uft-8,html為ANSI 不會(huì)出現(xiàn)失效的情況。
5. li在IE中底部空行的BUG。
IE6中列表的常見(jiàn)問(wèn)題出現(xiàn)在當(dāng)某個(gè) li 中的內(nèi)容是一個(gè) display: block 的錨點(diǎn)(anchor)時(shí)。在這種情況下,列表元素之間的空格將不會(huì)被忽略而且通常會(huì)顯示成額外的一行夾在每個(gè) li 之間。一種避免這種豎直方向多余空白的解決方法是賦予這些錨點(diǎn) layout。這樣還有一個(gè)好處就是可以讓整個(gè)錨點(diǎn)的矩形區(qū)域都可以響應(yīng)鼠標(biāo)點(diǎn)擊。
解決方法:
1) 在li a 樣式中加入zoom:1;
2)在li 樣式中加入display:inline ;
3) 將< li>標(biāo)簽寫(xiě)成一行;
4)在li a 樣式中加入width:100%或者一個(gè)寬度值。
建議采用第4二種解決方法
7. 父級(jí)使用padding后子元素絕對(duì)定位的BUG。
在父層使用position:relative;和padding(當(dāng)然0值除外)后,ie6中層的定位起始坐標(biāo)是從padding后的位置算起,而其他則從層的真實(shí)位置算起,而非被padding改變后的那個(gè)位置。這點(diǎn)造成使用position:absolute進(jìn)行層定位時(shí)ie6與其他瀏覽器的表現(xiàn)不一樣。
解決方法:給外層加寬度或zoom:1。
8. display:none引起的3像素的BUG
解決方案1:將最后一個(gè)div加一個(gè)margin-right:-3px。如:<divstyle=“display: none;”>< /div><divstyle=“background:green; width:10px;float:left; height:300px;margin-right:-3px”>< /div>
解決方案2:將display: none的div換一個(gè)形式隱藏。如:<divstyle="position:absolute;visibility: hidden ">< /div>
9. IE6的圖片3px問(wèn)題
IE 6 中 ,DIV 使用背景圖片(或直接插入圖片在DIV中)的時(shí)候,在圖片的下端會(huì)出現(xiàn)一條空白間隔,經(jīng)測(cè)量,剛好是 3px .
解決:IE6默認(rèn)字號(hào)是12pt,默認(rèn)行高是normal。
1. 給DIV加上:font-size: 0px;
2. 設(shè)置img為“display:block;”;
3. 即設(shè)置圖片的vertical-align屬性為“top,text-top,bottom,text-bottom”也可以解決;
4.設(shè)置圖片的浮動(dòng)屬性,“#sub img {float:left;}”;
5.取消圖片標(biāo)簽和其父對(duì)象的最后一個(gè)結(jié)束標(biāo)簽之間的空格,這種方法適用范圍比較窄,只限于父對(duì)象中只包含一個(gè)圖片對(duì)象,而且和父對(duì)象的結(jié)束標(biāo)簽之間不能有任何空隙。
10. IE6雙倍浮動(dòng)BUG
解決:解決辦法是加上display:inline。
11 .IE6的著名3px BUG(斷頭臺(tái)bug)
兩個(gè)層,一個(gè)浮動(dòng),一個(gè)不浮動(dòng),把浮動(dòng)的一個(gè)放在不浮動(dòng)層中,你會(huì)發(fā)現(xiàn)兩個(gè)之間有點(diǎn)間隙,寬度為3px。這個(gè)問(wèn)題是最讓人頭疼的問(wèn)題了。
解決方法:
1)所有的層都浮動(dòng) 把右邊那個(gè)層也設(shè)置成浮動(dòng)層就可以消除這可惡的3px間隔。
2)給左邊的層,應(yīng)用margin-right:-3px;,同樣可解決IE 3px bug。
12. Ie6圖片導(dǎo)致行距無(wú)效
解決方法:對(duì)和文字相連接的img、input、textarea、select、object等元素加以屬性 margin: (所屬line-height-自身高度)/2px 0)。
13. IE6使用濾鏡使PNG圖片透明后,容器內(nèi)鏈接失效的問(wèn)題。
解決方法是為鏈接定義一個(gè)相對(duì)定位屬性。position:relative。
存在兼容性問(wèn)題的css屬性設(shè)置
1)body,div,…{margin:0;padding:0;};
2)ul,ol,li{list-style-type:none;};
3)clear{clear:both;height:0;overflow:hidden;};
4)filter:alpha(opacity = 50);濾鏡設(shè)置透明度;
5)a{text-decoration:none;border:none;} ;
6)有float,有橫向margin時(shí),ie雙倍間距,設(shè)置display:inline。

以上是“ 常見(jiàn)瀏覽器兼容問(wèn)題有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!

網(wǎng)頁(yè)名稱:常見(jiàn)瀏覽器兼容問(wèn)題有哪些
瀏覽路徑:http://muchs.cn/article42/gedcec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、用戶體驗(yàn)、App設(shè)計(jì)動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站內(nèi)鏈

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)