我們在制作網(wǎng)站時(shí)，要求做好的網(wǎng)站在不同的瀏覽器下顯示都是一樣的效果，對(duì)于像火狐，谷歌瀏覽器這樣的標(biāo)準(zhǔn)瀏覽器，網(wǎng)站一般很少出現(xiàn)錯(cuò)位的現(xiàn)象。但在低版本IE瀏覽器下，卻會(huì)出現(xiàn)很多意想不到的問題和錯(cuò)位。（我們在自己建網(wǎng)站過程中，可以使用網(wǎng)站瀏覽器兼容測試軟件–IETester測試網(wǎng)站兼容性。）

下面是學(xué)做網(wǎng)站論壇總結(jié)的低版本IE瀏覽器網(wǎng)站不兼容的問題及解決方法，供廣大學(xué)員在做網(wǎng)站時(shí)，檢查網(wǎng)站錯(cuò)位時(shí)的問題所在。

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.可以通過外面再包一次DIV解決
由注釋造成文字溢出，屬于IE6的BUG，溢出文字的字?jǐn)?shù)=注釋的條數(shù)*2-1，這里的字?jǐn)?shù)在中文或英文數(shù)字時(shí)都成立。注釋坐在位置與溢出位置、區(qū)塊的浮動(dòng)以及文字區(qū)塊的固定寬度有必然聯(lián)系。

解決辦法：
1、不放置注釋。最簡單、最快捷的解決方法；
2、注釋不要放置于2個(gè)浮動(dòng)的區(qū)塊之間；
3、將文字區(qū)塊包含在新的<div></div>之間，如：<div style=”float:right;width:400px”><div>↓這就是多出來的那只豬</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中列表的常見問題出現(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)簽寫成一行；
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問題

IE 6 中 ，DIV 使用背景圖片（或直接插入圖片在DIV中）的時(shí)候，在圖片的下端會(huì)出現(xiàn)一條空白間隔，經(jīng)測量，剛好是 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è)問題是最讓人頭疼的問題了。

解決方法：

1、所有的層都浮動(dòng) 把右邊那個(gè)層也設(shè)置成浮動(dòng)層就可以消除這可惡的3px間隔
2、給左邊的層，應(yīng)用margin-right:-3px;，同樣可解決IE 3px bug。

12. Ie6圖片導(dǎo)致行距無效

解決方法：對(duì)和文字相連接的img、input、textarea、select、object等元素加以屬性 margin: (所屬line-height-自身高度)/2px 0）

13. IE6使用濾鏡使PNG圖片透明后，容器內(nèi)鏈接失效的問題。

解決方法是為鏈接定義一個(gè)相對(duì)定位屬性。position:relative

14. 禁用文本框中文輸入法的通用方法。
<div>驗(yàn)證碼<input type="text" style="ime-mode:disabled"/></div>

IE可以用ime-mode:disabled，firefox3也開始支持IE的這一私有屬性

標(biāo)簽： isp 谷歌 建網(wǎng)站 制作網(wǎng)站

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。