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-right：30px。我仍然想知道为什么嵌套输入上的边距占据了父div的边缘。

Answer 1

您正在查看IE7中的已知错误（我认为，6）称为"inherited margin bug"。

触发hasLayout属性的元素的第一个子输入（例如通过缩放：1，一个clearfix，设置高度或宽度）将继承其祖先左边距的总和

变通方法（来自this article）是：

（最常见）在输入上设置负边距。这将抵消继承的利润。使用input { *margin-left: -30px; }之类的内容仅定位IE7及以下版本。
不要在输入的祖先上使用边距。
取消对输入的父元素触发hasLayout的任何操作。
在输入之前放置一个内联元素（例如，<label>）和一些文本。
将输入换行到另一个内联元素（<span>，<label>，无论如何）。

Answer 2

您可以尝试将显示：内联规则应用于浮动元素。

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

再次检查？

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

2 个答案: