IE6的雙倍,3px,注釋引起的文字錯位等幾個BUG解決方法

2024-07-11 08:29:25

字體：大中小

來源：轉載

供稿：網友

1、IE 6 中，DIV 使用背景圖片（或直接插入圖片在DIV中）的時候，在圖片的下端會出現一條空白間隔，經測量，剛好是 3px .
解決辦法：
IE6默認字號是12pt，默認行高是normal。
找到原因就好解決了，給DIV加上：font-size: 0px;
2、IE6雙倍浮動BUG及解決辦法
比如

復制代碼

代碼如下:
#div1 {
float:left;
margin-left:10px;
width:200px;
height:200px;
border:1px solid red
}

左margin邊界設定為了10px，然后IE6卻偏偏給你顯示成雙倍的20px，
解決辦法：
加上display:inline;
3、ie6/7由注釋引起的文字錯位：

復制代碼

代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只IE6豬</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>



<div style="float:right;width:400px">↓這就是多出來的那只IE6豬</div>
</div>
</body>
</html>

這是個經典的例子。IE6在使用一大堆注釋放在包含在同一個DIV的不同元素之時就會這樣，重復一些文字在文字的頂或底部。
我在ASP生成HTML的循環語句中使用了一段注釋，結果在IE7下顯示整個DIV頂部像空了一截，底部正常，而IE6則頂部空一截，底部還有重影文字，就像上面多出現的豬一樣。
解決方法是：去掉注釋或者注釋不要放置于2個浮動的區塊之間。
4、IE6的著名3px BUG（斷頭臺bug）：

復制代碼

代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>52css.com</title>
<style type="text/css">

</style>
</head>
<body>
<div id="left">oyksoft.com</div>
<div id="right">oyksoft.com</div>
</body>
</html>

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

上一篇：css給span加float:right右浮動后內容換行下移

下一篇：textarea去掉滾動條 textarea橫向或縱向滾動條的去掉方法