IE浮动元素内input元素产生边距的有关问题
日期：2014-05-17 浏览次数：20712 次
IE浮动元素内input元素产生边距的问题
怪胎IE又有问题，当input在浮动元素内时，浮动元素会产生和margin-left、right相同的padding-left、right，如图。解决方法是用一个非浮动的div嵌套在input外，但产生此现象的原因不明，各位大神可否遇到？是何原因？
还有一点小小的问题，就是据说ie在新的块级格式化范围内，margin-bottom会被折叠，所以截图黄色部分产生不同，是不是呢？o(∩_∩)o
下图是标准浏览器的截图：
下图是IE9下的截图：
------解决方案--------------------
为什么是display:table ？
如果是清除浮动的话建议用block。
我用IE9测试时没有问题的，不知道你是怎么测试的！
------解决方案--------------------
如果用marign的话IE678都会出现问题，IE6会产生双倍的浮动；用到flaot时要注意清除浮动，针对不同的浏览器要注意使用不同的写法
- 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时要注意清除浮动，针对不同的浏览器要注意使用不同的写法
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
