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

先看代码：

<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 IE6、7表现异常：

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

IE8、9，chrome，FF表现正常

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

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

转自：

https://www.cnblogs.com/flyjs/archive/2012/02/20/2360497.html