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

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时要注意清除浮动，针对不同的浏览器要注意使用不同的写法