Как исправить комбинацию float-clear в IE7

У меня есть 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>

css css-float internet-explorer-7
person Mithun Sreedharan    schedule 16.02.2010    source источник

Ответы (3)


arrow_upward
5
arrow_downward

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

.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)

Обновление:

Я посмотрел на это еще раз и немного изменил разметку, а также сделал ее допустимой для 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>
person Allan Kimmer Jensen    schedule 16.02.2010
comment
Я использовал ваш код, см. здесь tinypic.com/m/96xlwn/4 Это то, что я я вхожу в IE7 tinypic.com/m/96xlkk/4 Вот что я получение в Firefox tinypic.com/m/96xlkl/4 Как-то не работает - person Mithun Sreedharan; 16.02.2010

arrow_upward
3
arrow_downward

Удалить float:right из 'field_error'

person Zhivago    schedule 16.02.2010

arrow_upward
2
arrow_downward

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

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

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

Спасибо

person Shakeeb Ahmed    schedule 17.02.2010
comment
Можете ли вы показать мне ссылку на страницу, я сделаю это легко. Но это решение, если вы правильно его реализуете. Если вы все еще не понимаете. Дайте мне знать, я создам и загружу страницу куда-нибудь.... - person Shakeeb Ahmed; 18.02.2010