龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

IE中怎么会出现双倍边距?

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
IE6.0环境中双倍边距BUG。先看下面的CSS代码。 div{ float:left; margin-left:10px; width:420px; height:150px; border:1pxsolidred } 这样设置以后。本来左边距设置为10px,但IE6.0解释为20px,这是一个比较头疼
  
  IE6.0环境中双倍边距BUG。先看下面的CSS代码。
div {
    float:left;
    margin-left:10px;
    width:420px;
    height:150px;
    border:1px solid red
    }
  这样设置以后。本来左边距设置为10px,但IE6.0解释为20px,这是一个比较头疼的问题。
  但解决也非常简单。办法就是是加上display:inline。就搞定了。看下面的示例对比!
双陪边距的效果:
Source Code to Run [www.fun52.com]
fun52.com
body {
margin:0
}
div {
float:left;
margin-left:10px;
width:420px;
height:150px;
border:1px solid red
}
Div+CSS XHTML XML 教程大全 - fun52.com
Div+CSS XHTML XML 教程大全 - fun52.com
Div+CSS XHTML XML 教程大全 - fun52.com
Div+CSS XHTML XML 教程大全 - fun52.com
Div+CSS XHTML XML 教程大全 - fun52.com
Div+CSS XHTML XML 教程大全 - fun52.com
Div+CSS XHTML XML 教程大全 - fun52.com
   [ 可先修改部分代码 再运行查看效果 ]
解决BUG以后的效果:
Source Code to Run [www.fun52.com]
fun52.com
body {
margin:0
}
div {
float:left;
margin-left:10px;
display:inline;
width:420px;
height:150px;
border:1px solid red
}
Div+CSS XHTML XML 教程大全 - fun52.com
Div+CSS XHTML XML 教程大全 - fun52.com
Div+CSS XHTML XML 教程大全 - fun52.com
Div+CSS XHTML XML 教程大全 - fun52.com
Div+CSS XHTML XML 教程大全 - fun52.com
Div+CSS XHTML XML 教程大全 - fun52.com
Div+CSS XHTML XML 教程大全 - fun52.com
   [ 可先修改部分代码 再运行查看效果 ]


精彩图集

赞助商链接