중첩 된 요소가 부모 div의 여백을 상속 받음 ie7

Question

IE7에서 중첩 된 입력 요소가 상위 div의 여백을 차지하는 이유를 알아 내려고했습니다. 그래서 essense에서 마진은 배가되고 있습니다.

<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

플로팅 요소에 디스플레이 : 인라인 규칙을 적용 해 볼 수 있습니까?

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

다시 확인 하시겠습니까?

Answer 2

당신은 IE7의 알려진 버그를보고 있습니다. (생각해 보면, 6) "inherited margin bug"입니다. 조상 왼쪽 마진의 합을 상속 (높이 또는 폭을 설정 (1), clearfix 크게 통해 예)

hasLayout의 특성과 요소의 첫 번째 자식 입력이 트리거. (this article에서)

해결 방법은 다음과 같습니다

1. (가장 일반적인) 음의 입력에 여백이 왼쪽으로 설정합니다. 그것은 상속 된 마진을 막을 것입니다. input { *margin-left: -30px; }과 같은 것을 사용하면 IE7 이하 만 타겟팅 할 수 있습니다.
2. 입력의 조상에 여백을 사용하지 마십시오.
3. 입력의 부모 요소에서 hasLayout을 트리거 한 모든 작업을 취소합니다.
4. 입력 직전에 인라인 요소 (예 : <label>)와 일부 텍스트를 넣으십시오.
5. 다른 인라인 요소 (<span>, <label>, 무엇이든간에)로 입력을 줄 바꿈하십시오.