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

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

1.??li在IE中底部3像素的BUG?

解決方案：在<li>上加float:left；即可解決

2.??IE6中奇數(shù)寬高的BUG。

解決方案：就是將外部相對定位的div寬度改成偶數(shù)。高度也是一樣的。

3.??IE6文字溢出BUG? ?

引發(fā)這種BUG有幾個條件
1.是注釋引起的,刪除所有注釋即可.
2.hidden的input直接放在form下.
3.display為none的div也有可能引發(fā)此bug.
4.可以通過外面再包一次DIV解決
由注釋造成文字溢出，屬于IE6的BUG，溢出文字的字數(shù)=注釋的條數(shù)*2-1，這里的字數(shù)在中文或英文數(shù)字時都成立。注釋坐在位置與溢出位置、區(qū)塊的浮動以及文字區(qū)塊的固定寬度有必然聯(lián)系。

解決辦法：
1、不放置注釋。最簡單、最快捷的解決方法；
2、注釋不要放置于2個浮動的區(qū)塊之間；
3、將文字區(qū)塊包含在新的<div></div>之間，如：<div style=”float:right;width:400px”><div>↓這就是多出來的那只豬</div></div>；
4、去除文字區(qū)塊的固定寬度，與3有相似之處；
5、在后面加一個<br />或者空格；（不推薦）
6、使用IE注釋格式，如：<!–[if !IE]>Put your commentary in here…<![endif]–>
7、給盒子加position:relative;屬性

4. 樣式中文注釋后引發(fā)失效。

滿足下面條件就會引起 注釋下面的樣式不起作用：
1. css有中文注釋
2. css為ANSI編碼
3. html為utf-8編碼

解決方法：
1. 去掉中文注釋，用英文注釋
2. 統(tǒng)一css 和 html 的編碼

建議采用第二種解決方法

ps： css為uft-8??html 為ANSI 不會出現(xiàn)失效的情況。

5. li在IE中底部空行的BUG。

IE6中列表的常見問題出現(xiàn)在當某個 li 中的內(nèi)容是一個 display: block 的錨點(anchor)時。在這種情況下，列表元素之間的空格將不會被忽略而且通常會顯示成額外的一行夾在每個 li 之間。一種避免這種豎直方向多余空白的解決方法是賦予這些錨點 layout。這樣還有一個好處就是可以讓整個錨點的矩形區(qū)域都可以響應鼠標點擊。

解決方法：
1. 在li a 樣式中加入zoom:1；
2. 在li 樣式中加入display:inline ；
3. 將<li>標簽寫成一行；
4. 在li a 樣式中加入width:100%或者一個寬度值；

建議采用第4二種解決方法

7. 父級使用padding后子元素絕對定位的BUG。

在父層使用position:relative;和padding（當然0值除外）后，ie6中層的定位起始坐標是從padding后的位置算起，而其他則從層的真實位置算起，而非被padding改變后的那個位置。這點造成使用position:absolute進行層定位時ie6與其他瀏覽器的表現(xiàn)不一樣。

解決方法：
給外層加寬度或zoom:1

8. display:none引起的3像素的BUG

解決方案1：
將最后一個div加一個margin-right:-3px。
如：<divstyle="display: none; "></div><divstyle="background:green; width:10px; float:left; height:300px;margin-right:-3px"></div>
解決方案2：
將display: none的div換一個形式隱藏。
如：<divstyle="position:absolute; visibility: hidden "></div>

9. IE6的圖片3px問題

IE 6 中 ，DIV 使用背景圖片（或直接插入圖片在DIV中）的時候，在圖片的下端會出現(xiàn)一條空白間隔，經(jīng)測量，剛好是 3px .

解決：

IE6默認字號是12pt，默認行高是normal。

1. 給DIV加上：font-size: 0px;

2. 設置img為“display:block;”。

3. 即設置圖片的vertical-align屬性為“top，text-top，bottom，text-bottom”也可以解決。

4.設置圖片的浮動屬性，“#sub img {float:left;}”。
5.取消圖片標簽和其父對象的最后一個結(jié)束標簽之間的空格，這種方法適用范圍比較窄，只限于父對象中只包含一個圖片對象，而且和父對象的結(jié)束標簽之間不能有任何空隙。

10. IE6雙倍浮動BUG

解決辦法是加上display:inline;

11 .IE6的著名3px BUG（斷頭臺bug）：

兩個層，一個浮動，一個不浮動，把浮動的一個放在不浮動層中，你會發(fā)現(xiàn)兩個之間有點間隙，寬度為3px。這個問題是最讓人頭疼的問題了。

解決方法：

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

12. Ie6圖片導致行距無效

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

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

解決方法是為鏈接定義一個相對定位屬性。position:relative

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

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

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

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