先看代码:
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 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了。