IE浮动元素内input元素产生边距的有关问题

2012-03-09

IE浮动元素内input元素产生边距的问题HTML code!DOCTYPE htmlheadmeta http-equivContent-Type co

IE浮动元素内input元素产生边距的问题

HTML code

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style type="text/css">.cf:before, .cf:after {    content:"";    display:table;}.cf:after {    clear:both;}.cf {    zoom:1;}/*清除浮动*/.box-outer{    background-color:#FFFF00;}.box{    float:left;    margin:10px;    padding:0px;    background-color:#FF0000;}.box-inner{    padding:0px;    margin:0px;    width: 150px;    height:30px;    background:#006600;    border:none;}</style></head><body><div class="box-outer cf"><div class="box"><input class="box-inner" /></div></div></body></html>

怪胎IE又有问题，当input在浮动元素内时，浮动元素会产生和margin-left、right相同的padding-left、right，如图。解决方法是用一个非浮动的div嵌套在input外，但产生此现象的原因不明，各位大神可否遇到？是何原因？
还有一点小小的问题，就是据说ie在新的块级格式化范围内，margin-bottom会被折叠，所以截图黄色部分产生不同，是不是呢？o(∩_∩)o

下图是标准浏览器的截图：

下图是IE9下的截图：

[解决办法]
为什么是display:table ？
如果是清除浮动的话建议用block。
我用IE9测试时没有问题的，不知道你是怎么测试的！
[解决办法]
如果用marign的话IE678都会出现问题，IE6会产生双倍的浮动；用到flaot时要注意清除浮动，针对不同的浏览器要注意使用不同的写法

热点排行

CSS

IE浮动元素内input元素产生边距的有关问题