嵌套元素继承父级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>，无论如何）。