在ie7中继承父Div页边距的嵌套元素

Question

试图找出为什么在IE7中，嵌套的输入元素占据了父div的边缘。因此，在本质上，利润率翻了一番。

    <style>
    <!--
    h1.redsubhead{font-size:14px;}
    .accountInfo,.loginInfo{-moz-border-radius: 6px 6px 6px 6px;background: #EBFBFF; border: 1px solid #8DCAD9;margin-bottom: 30px;padding:10px;}
    #ai_pw_wrap,#li_pw_wrap{border:1px solid #f0f;margin-right: 30px;padding:0;}
    #ai_email_wrap{margin-right:30px;padding:0;}
    .ai_wrap,.li_wrap{float:left;}
    .ai_email_input, .li_email_input,.li_pw_input{width:170px;}
    .ai_pw_input{width:130px;}
    .ai_label,.li_label{font-size: 11px; font-weight: bold;}


    .ai_link,.li_link{font-size: 9px; float:right}
     h1.redsubhead{float:left;}
     #li_btn_wrap{margin-top:10px;float:right;}
     .ai_wrap input{margin:0 !important;}
     .ai_label{margin:0}
    -->
    </style>
    <div class="accountInfo">
      <h1 class="redsubhead">Account Info</h1>
      <a class="ai_link" href="#">Returning Member Login</a>
      <div class="clear"></div>

      <div id="ai_email_wrap" class="ai_wrap">
   <label for="edit-payment-new-card-cc-cardholder" class="ai_label">E-mail: </label><br>
   <input type="text" class="ai_email_input" value="John Doe" size="60" maxlength="128">
      </div>

      <div id="ai_pw_wrap" class="ai_wrap">
   <label for="edit-payment-new-card-cc-cardholder" class="ai_label">Password: </label><br>
   <input type="text" class="ai_pw_input" value="John Doe" size="60" maxlength="128">
      </div>

      <div  id="ai_pwc_wrap" class="ai_wrap">
   <label for="edit-payment-new-card-cc-cardholder" class="ai_label">Password Confirm: </label><br>
   <input type="text" class="ai_pw_input" value="John Doe" size="60" maxlength="128">
      </div>

      <div class="clear"></div>
    </div>
    <div class="loginInfo hide">
      <h1 class="redsubhead">Login</h1>
      <a class="ai_link" href="#">New User Signup</a>
      <div class="clear"></div>
      <div id="li_email_wrap" class="li_wrap">
   <label for="edit-payment-new-card-cc-cardholder" class="li_label">E-mail: </label><br>
   <input type="text" class="li_email_input" value="John Doe" size="60" maxlength="128">
      </div>
      <div id="li_pw_wrap" class="li_wrap">
   <label for="edit-payment-new-card-cc-cardholder" class="li_label">Password: </label><br>
   <input type="text" class="li_pw_input" value="John Doe" size="60" maxlength="128">
      </div>
      <div id="li_btn_wrap">
       <input type="image" src="/img/checkout/li_login.png" class="li_submit" value="start" name="submit_order">
      </div>
      <div class="clear"></div>
    </div>

有什么建议吗？我确实找到了一个解决方法，如果我将右边距:30px改为padding:30px。我仍然想知道为什么嵌套输入的边距采用父div的边距。

Answer 1

您看到的是一个名为"inherited margin bug"的IE7 (我认为是6)中的已知bug。

触发了hasLayout属性的元素的第一个子输入(例如，通过缩放:1、清除、设置高度或宽度)将继承其祖先的左边距之和。

解决方法(来自this article)包括：

1. (最常见的)在输入上设置一个负边距--left。这将抵消继承下来的利润率。使用类似input { *margin-left: -30px; }的内容仅针对IE7及以下内容。
2. 不在输入的祖先上使用边距。
3. 撤消在输入的父元素上触发hasLayout的任何操作。
4. 在紧靠输入之前放置内联元素(例如，<label>)和一些文本。
5. 将输入包装在另一个内联元素(D14、D15等)中。H216G217

Answer 2

您是否可以尝试将display: inline规则应用于浮动元素。

.ai_wrap,.li_wrap{float:left; display:inline;}

再检查一遍？