先看代码:

<div >
    <div >
        <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了。

相关文章: