两个层之间的为什么会有间隙(IE3pxbug)

所属栏目:兼容性问题 时间:2014-01-04 来源:网络 作者:不详 点击:

  这个问题普遍的困扰着新手朋友,不知道如何是好,想不出办法进行解决。
其实这就是传说中的“IE 3px bug”。解决的办法也比较简单。请看下面的示例说明。

IE中两个层之间的间隙(IE 3px 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>mb5u.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">mb5u.com</div>
<div id="right">mb5u.com</div>
</body>
</html>

解决3px bug的方法之浮动法float
此例中,我们给右边的层,应用float:left;浮动,即可解决IE 3px 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>mb5u.com</title>
<style type="text/css">
#left {
float:left;
width:200px;
height:100px;
background:#f00;
}
#right {
float:left;
width:200px;
height:100px;
background:#fc0;
}
</style>
</head>
<body>
<div id="left">mb5u.com</div>
<div id="right">mb5u.com</div>
</body>
</html>

解决3px bug的方法之障眼法
此例中,我们给左边的层,应用margin-right:-3px;,同样可解决IE 3px 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>mb5u.com</title>
<style type="text/css">
#left {
float:left;
width:200px;
height:100px;
margin-right:-3px;
background:#f00;
}
#right {
width:200px;
height:100px;
background:#fc0;
}
</style>
</head>
<body>
<div id="left">mb5u.com</div>
<div id="right">mb5u.com</div>
</body>
</html>


请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: