HTML/CSS : Input element weird indent ie7

Question

http://jsfiddle.net/vol7ron/yHdr6/

INPUT 占用了祖先 DIV 的左边距。
设置父 DIV/SPAN/INPUT 的边距没有效果(除非我错过了一个)。

---

HTML

---

<form>
   <div id="contact_info">
      <div><span>Name:  </span></div>
      <div><span>Email: </span></div>
      <div><span>Phone: </span></div>
      <div>
         <label for="email">Owner Email: </label>
         <span class="ib">
            <input type="text" name="email" id="email"/><br />
            <span>(correct if needed)</span>
         </span>
      </div>
   </div>
</form>

---

CSS

---

span.ib { 
    border         : 1px solid red;  /* for debugging */
    display        : inline-block; 
    vertical-align : top; 
} 

#contact_info {
    border         : 1px solid #ccc; 
    margin         : 1em 2em; 
    padding        : 1em;
}

/* Debugging Attempts *
.ib,input {
    clear:left;
    display:inline-block;
    margin:0em 0em !important;
    left:0;
    padding:0em 0em !important;
    position:relative;
    text-align:left;
    text-indent:0 !important;
}/**/

Answer 1

我会始终确保您包含 CSS 重置以避免此类问题。 Eric Meyer 的工具被广泛认为是一个很好用的工具，尽管它不是唯一的工具。

http://meyerweb.com/eric/tools/css/reset/