嵌套元素繼承父級Div在ie7中的邊距

Question

試圖找出爲什麼在IE7中，嵌套的input元素正在處理父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> 

有什麼建議？我找到了一個修復方法，如果我將margin-right：30px修改爲padding-right：30px。我仍然想知道爲什麼嵌套輸入中的邊距會佔用父div的邊距。

Answer 1

你可以嘗試應用display：inline rule到你的浮動元素。

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

並再次檢查？

Answer 2

您正在查看IE7中的一個已知錯誤（我認爲它是6），名爲"inherited margin bug"。

觸發hasLayout屬性的元素的第一個子輸入（例如，通過縮放：1，clearfix，設置高度或寬度）將繼承其祖先的左邊距的總和。

（從this article）的解決方法是：

1. （最常見）設置了負利潤率左輸入。這將抵消繼承利潤。使用類似input { *margin-left: -30px; }的東西只針對IE7及以下版本。
2. 請勿在輸入的祖先上使用頁邊空白。
3. 取消在輸入的父元素上觸發hasLayout的任何操作。
4. 在輸入前加一個內聯元素（比如說一個<label>）和一些文本。
5. 將輸入包裹在另一個內聯元素中（<span>，<label>，無論如何）。