Обходной путь для IE7 для переноса текста при применении hasLayout

Есть ли обходной путь для известной проблемы IE7, когда текст не обтекает плавающие элементы, когда к контейнеру текста применяется hasLayout (в данном случае из-за требуемой высоты)?

Например:

<div style="width:200px;">
    <div style="float:right; width:50px; height:100px; background:#ff0;">&nbsp;</div>
    <div style="background:#0ff; height:400px;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. 
    </div>
</div>

1 ответ

Используйте следующий процесс:

  • Создайте элемент-заполнитель для каждой строки
  • Задавать float:left; clear:left; overflow:hidden; и общая высота для каждого заполнителя
  • Установите конкретную ширину для каждого заполнителя

Вот пример:

#holdit em {display:block; float:left; height:18px; overflow:hidden; clear:left;}
.a230 {width:230px;}
.a240 {width:240px;}
.a250 {width:250px;}
.a270 {width:270px;}
.a300 {width:300px;}
.a340 {width:340px;}
.a360 {width:360px;}
.a370 {width:370px;}
.a400 {width:400px;}
.a420 {width:420px;}
.a430 {width:430px;}
.a460 {width:460px;}
.a490 {width:490px;}
.a500 {width:500px;}
.a540 {width:540px;}
.a550 {width:550px;}

Рекомендации

Другие вопросы по тегам