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