IE 和 Firefox 下 CSS 中 margin-left IE显示为两倍的解决
时间:2009-08-19 16:25来源:未知 作者:admin 点击: 93次
另：当使用margin属性不能正确显示时，尝试使用display:inline;看能否解决问题
问题描述
一个html页
<div style="190px; margin-left:10px; overflow:auto; background-color:#FFCCFF; float:left;">test</div>
但是左侧却显示缩进了20个px
此设置在firefox 和 opera 都是正常的
网上查找了原因发现是IE的一个BUG
在style里面添加display:inline;问题解决
另：当使用margin属性不能正确显示时，尝试使用display:inline;看能否解决问题
在IE6中有一个大家经常碰到的bug，margin在碰到float时会距离会加倍。解决这个bug方法是多加一个无用的CSS定义：display:inline;你可以对比下面的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS在线-示例</title>
<style type="text/css">
#parent{300px;height:300px;background:blue}
#addinline{display:inline;float:left;200px;heigt:100px;margin-left:10px;background:red;}
#notaddinline{float:left;200px;heigt:100px;margin-left:10px;background:green;}
</style>
</head>
<body>
<div id="parent">
<div id="addinline"></div>
<div id="notaddinline"></div>
<div>
</body>
</html>
从上面的例子中可以看出，加了display:inline的div的margin属性正确的显示了我们设置的距离，而没有加的div则是2倍margin设定值。