IE6的双倍,3px,注解引发的文本移位等几个BUG处理方

日期:2020-09-24 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

1、IE 6 中 ,DIV 应用情况照片(或立即插进照片在DIV中)的情况下,在照片的下端会出現1条空白间距,经精确测量,恰好是 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>多了1只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在应用1大堆注解放在包括在同1个DIV的不一样元素之时就会这样,反复1些文本在文本的顶或底部。
我在ASP转化成HTML的循环系统句子中应用了1段注解,結果在IE7下显示信息全部DIV顶部像空了1截,底部一切正常,而IE6则顶部空1截,底部也有重影文本,就像上面多出現的猪1样。
处理方式是:去掉注解或注解不必置放于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⑻" />
<title>52css.com</title>
<style type="text/css">
<!--
#left {
float:left;
width:200px;
height:100px;
background:#f00;
}
#right {
width:200px;
height:100px;
background:#fc0;
}
-->
</style>
</head>
<body>
<div id="left">oyksoft.com</div>
<div id="right">oyksoft.com</div>
</body>
</html>

两个层,1个波动,1个不波动,把波动的1个放在不波动层中,你会发现两个之间有点空隙,宽度为3px。这个难题是最使人头疼的难题了。
处理方式
1、全部的层都波动 把右侧那个层也设定成波动层便可以清除这可恨的3px间距
2、给左侧的层,运用margin-right:⑶px;,一样可处理IE 3px bug。