IE7中input元素相对父级元素错位

input元素相对父级元素错位了？IE7

先看代码：

?

1 2 3 4 5

< div id = "div1" style = "margin-left:100px" >      < div id = "div2" style = "border:1px solid #000;width:100px" >          < input type = "text" name = "text" style = "width:100%;" />      </ div > </ div >

指望结果：

div1距离左边边距100px，div2中的input距离div1的左边距离为0 IE六、7表现异常：

div2中的input距离div1的左边距离为100px，也就是说继承了父级div1的margin-left

IE八、9，chrome，FF表现正常

缘由：

产生这种错误的缘由是由于当input仅仅包含父元素，父元素拥有layout，和margin-left属性时，IE6和7的input就会错误的继承margin-left这样的属性。

解决办法：

给input元素外面套一个span,label这样的内联元素，这样就会消除bug。 原理很简单，input父元素是内敛元素，就不会继承margin-left了。