вложенный элемент, наследующий поле родительского Div в ie7

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>

Есть предложения?Я нашел исправление, если я изменил поле margin-right: 30px на padding-right: 30px.Я все еще хочу знать, почему поле для вложенного ввода принимает значение поля родительского элемента div.

Answer 1

Вы смотрите на известную ошибку в IE7 (и, мне кажется, 6), называемую «наследуемой ошибкой на полях» .

Первый дочерний вход элемента сСработавшее свойство hasLayout (например, через zoom: 1, очистка, установка высоты или ширины) унаследует сумму левых полей своих предков .

Обходные пути (от эта статья ):

1. (наиболее часто встречается) Установить отрицательное поле слева на входе.Это будет противодействовать унаследованной марже.Используйте что-то вроде input { *margin-left: -30px; } только для IE7 и ниже.
2. Не используйте поля для предков ввода.
3. Отмените действие, вызванное hasLayout для родительского элемента ввода.
4. Поместите встроенный элемент (скажем, <label>) и некоторый текст непосредственно перед входом.
5. Оберните ввод в другой встроенный элемент (<span>, <label>, что угодно).

Answer 2

Можете ли вы попробовать применить правило display: inline к вашему плавающему элементу.

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

и проверить еще раз?