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