Как исправить IE7 плавать чистой комбинации

Question

У меня есть класс DIV field_wrapper, который содержит 3 суб дивы FIELD_LABEL, field_input и field_error

мне нужно поставить FIELD_LABEL, field_input бок о бок и field_error ниже первых двух.

Пожалуйста, см. Ниже код css, чтобы узнать, как я достиг этого, Моя проблема заключается в том, что он не работает в IE7. ясно, что оба примененных к field_error не работают.

Даже после долгого поиска в Google я не могу найти правильный способ исправить это, не добавляя надпись HTML. Пожалуйста, советы наконечника CSS или любой другой способ, чтобы избежать дополнительных кода разметки

.field_wrapper 
{ 
clear:both; 
} 

.field_label 
{ 
float:left; 
width:40%; 
} 
.field_input 
{ 
float:left; 
width:40%; 
} 
.field_error 
{ 
clear: both; 
color:#FF0000; 
float: right; 
text-align:left; 
width: 60%; 
} 

<form method="post" action="http://localhost/locations/add"> 
<div class="field_wrapper"> 
    <div class="field_label"> 
    <label for="location_add_name">Name</label> 
    </div> 
    <div class="field_input"> 
    <input type="text" id="location_add_name" value="" name="name"> 
    </div> 
    <div class="field_error"> 
    <p>The Name field is required.</p> 
    </div> 
</div> 
<div class="field_wrapper"> 
    <div class="field_label"> 
    Address 
    </div> 
    <div class="field_input"> 
    <textarea id="location_add_address" rows="12" cols="90" name="address"></textarea> 
    </div> 
    <div class="field_error"> 
    </div> 
</div> 
<div class="form_submit"> 
    <input type="submit" value="Add" name="submit"> 
</div> 
</form> 

Answer 1

Если вы не хотите, чтобы удалить поплавок влево. Вы можете использовать эту обертку код

.field_wrapper { display: inline-block; } 
.field_wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
* html .field_wrapper { height: 1%; } 
.field_wrapper{ display: block; } 

Это работает для меня каждый раз (IE6 а)

Update:

Я снова посмотрел на это, и изменил разметку немного, также сделал его действительным xhtml. Просто поместите класс в тег P, вам не нужен дополнительный div.

.field_wrapper 
    { 
    clear:both; 
    } 

    .field_label 
    { 
    float:left; 
    width:40%; 
    } 
    .field_input 
    { 
    float:left; 
    width:40%; 
    } 
    .field_error 
    { 
    clear: both; 
    color:#f00; 
    width: 60%; 
    } 


<form method="post" action="http://localhost/locations/add"> 
    <div class="field_wrapper"> 
     <div class="field_label"> 
      <label for="location_add_name">Name</label> 
     </div> 
     <div class="field_input"> 
      <input type="text" id="location_add_name" value="" name="name" /> 
      <p class="field_error">The Name field is required.</p> 
     </div> 
    </div> 

    <div class="field_wrapper"> 
     <div class="field_label">Address</div> 
     <div class="field_input"> 
      <textarea id="location_add_address" rows="12" cols="90" name="address"></textarea> 
     </div> 
    </div> 
    <div class="form_submit"> 
     <input type="submit" value="Add" name="submit" /> 
    </div> 
</form> 

Answer 2

Удалить поплавок: прямо из «» field_error

Answer 3

позвольте мне сказать вам одно. если у вас есть плавающий контент в контейнере, контейнер никогда не будет содержать его до тех пор, пока вы не установите свойство переполнения контейнера в скрытое состояние или не сделаете его плавающим. подобный

.field_wrapper 
{ 
clear:both; 
overflow:hidden; 
} 

Теперь он содержит весь плавающий элемент. Теперь для вашей ошибки div, когда вы плаваете, вы перемещаете элементы слева направо, поэтому дайте понять: осталось только, и это сработает.

Thanks