Question

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/

Answer 2

它实际上并没有继承保证金。父div上的display: inline-block;导致其中的输入元素offset left为div#contact_info的边距量。这与margin-left不同，与hasLayout相关。

您有几个修复选择：

从范围中移除inline-block并找到其他方式（例如在标签下添加说明）。
使用IE7样式表将position: relative; left: -2em;添加到输入中。这比使用缩放更有意义，因为将来人们可能无法理解这种效果。但是，显而易见的是，浏览器修复了一个错误，导致输入位置被移动并且您正在补偿它。
使用zoom，请不要。将zoom:1添加到父div#contact_info甚至无法连接到问题所在的hasLayout以外的问题。此外，Safari和IE支持缩放作为css属性，因此这可能会在未来引起其他问题。

Answer 3

因此，在尝试了两件事后，我发现将zoom:1或display:inline-block;添加到输入的父DIV（不是SPAN），将删除这个奇怪的缩进。因此，这是另一个hasLayout问题。

我还没有发现为什么设置保证金不能解决问题，而且我忘记了Internet Explorer何时从父系统和兄弟系列继承属性的规则。

HTML / CSS：输入元素奇怪的缩进ie7

HTML

CSS

3 个答案: