2010四月29
IE双倍浮动边界Bug
看《CSS实战精粹》已经看到hack了，之所以最近没有把文章抄上来，一是懒，二就是比较困惑。
对CSS我属于白痴一样，所以看书中介绍的例子，解决了某某样式BUG，对此我一头雾水，所以我决定将书中提到的一些Bug给弄出来看一下到底是如何让人头疼的一个问题。
第一篇，大家一起来看一下“IE双倍浮动边界Bug”，高手请飘过~~
Bug 描述
大家通过上面提供的链接很方便知道现象的描述。不过在英文原版里Bug的图示并不说明问题(图中并未显示出IE6margin双边距)。
那么让我们自己动手来看一下吧。
Bug 展示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE Double Margin Bug</title>
<style>
#wrapper{
width:400px;
height:160px;
border:1px solid red;
background:blue;
}
#bugdiv{
width:150px;
float:left;
margin:5px 0 5px 100px;
height:150px;
background:green;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="bugdiv">
I'm in bugdiv
</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE Double Margin Bug</title>
<style>
#wrapper{
width:400px;
height:160px;
border:1px solid red;
background:blue;
}
#bugdiv{
width:150px;
float:left;
margin:5px 0 5px 100px;
height:150px;
background:green;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="bugdiv">
I'm in bugdiv
</div>
</div>
</body>
</html>
IE6下面的效果如图：
ie6_double_margin_bug
Bug 解决
效果图大家已经看到了，200px，很神奇。解决方法很简单，在有浮动的元素上加上display:inline;搞定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE Double Margin Bug</title>
<style>
#wrapper{
width:400px;
height:160px;
border:1px solid red;
background:blue;
}
#bugdiv{
width:150px;
float:left;
margin:5px 0 5px 100px;
height:150px;
background:green;
display:inline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="bugdiv">
I'm in bugdiv
</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE Double Margin Bug</title>
<style>
#wrapper{
width:400px;
height:160px;
border:1px solid red;
background:blue;
}
#bugdiv{
width:150px;
float:left;
margin:5px 0 5px 100px;
height:150px;
background:green;
display:inline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="bugdiv">
I'm in bugdiv
</div>
</div>
</body>
</html>
ie6_double_margin_fixed
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2010/04/29/1755/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
沙发，hack超好用的
[回复]
这个bug我已经碰上N次了 :sad:
[回复]
祝劳动人民工的节日快乐～ :razz:
[回复]
看来老兄是前端工作者,这方面要多向你学习
[回复]
@久酷
谈不上前端，只是爱好。呵呵。互相学习~~
[回复]
对象的float和margin同时存在时会出现这个BUG
[回复]
@bolo
呵呵。是的。 :razz:
[回复]
这个问题经常会有的，我也是用这个来解决的
[回复]
恩知道了，display：inline；不错
[回复]
请教下楼主，你那个屏幕标尺的软件是什么？可否发我一个
[回复]
@Tr0j4n
http://www.xiaoxiaozi.com/2009/05/09/364/
标尺的名字叫做：FastStone Capture
你可以搜一下。挺好用的！
[回复]