IE не очищающий последующие поплавки

Я пытаюсь получить два divs, чтобы плавать на противоположных сторонах страницы, с текстом, текущим между ними. Верхняя часть второго (выровненного слева) div должна быть ровной с нижней частью первого (выровненного справа) div. Нижеприведенный код отлично работает в FF, Chrome, Opera и т. Д., Но они не корректно отображаются в IE. Оба div отображаются в верхней части текста.IE не очищающий последующие поплавки

Если я перемещаю левый выровненный div достаточно низко в тексте, он отлично работает в IE, но это не очень устойчивое решение.

Я нашел несколько страниц на ошибках IE по IE, но я не нашел ничего, что прямо говорило об этом.

CSS

div { 
    width: 200px; 
    margin-top: 10px; 
    border-style: solid; 
    border-width: 1px; 
    position: relative; 
} 
.wrapper { 
    width: 600px; 
    border-color: #FF0000; 
} 
.right { 
    float: right; 
    border-color: #00FF00; 
} 
.left { 
    float: left; 
    clear: both; 
    border-color: #0000FF; 
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<link rel="stylesheet" href="float.css" /> 
</head> 
<body> 
<div class="wrapper"> 
    <div class="right"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Nulla pretium tempor leo. Vivamus mi risus, dapibus ac, 
     consectetur quis, pellentesque eget, sem. 
    </div> 
    <div class="left"> 
      Proin malesuada. Ut vel lorem. Cras rhoncus nisl accumsan 
      turpis tristique consequat. Sed lacinia ligula at nibh. 
      Morbi in quam. Morbi commodo nibh. 
    </div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nulla pretium tempor leo. Vivamus mi risus, 
    dapibus ac, consectetur quis, pellentesque eget, sem. 
    Maecenas est dui, imperdiet nec, fermentum ut, 
    pretium a, orci. Quisque hendrerit interdum orci. 
    Nulla sit amet risus non enim ultrices bibendum. 
    Aenean arcu purus, rhoncus at, vestibulum vel, 
    volutpat et, nunc. Integer eget risus eget purus viverra 
    congue.</p> 
    <p>Nullam vel libero ut purus semper ullamcorper. 
    Pellentesque mattis tincidunt odio. Nullam pulvinar 
    orci at dolor. Sed volutpat eros ac elit. 
    Praesent porttitor libero sed felis. Vivamus lobortis 
    pellentesque diam. 
    Proin laoreet massa ac metus. Integer faucibus lorem 
    molestie nibh. Integer id massa. Integer ligula ipsum, 
    pellentesque id, interdum at, pretium eget, orci. 
    Proin malesuada. Ut vel lorem.</p> 
</div> 
</body> 
</html>

источник

2009-04-27 dkuchler

Что ваш вопрос? Это определенно ошибка, и она исправлена в IE8, но ошибки в IE не являются чем-то новым. Вы хотите заставить его работать в IE7 или просто убедиться, что это ошибка? –

Да, я пытаюсь заставить его работать в IE6/7. – dkuchler

Укажите, какую версию IE вы используете. – thejartender

IE7 и IE6 имеют variety of problems с элементами, которые имеют как float и clear на них. В IE7 использование clear на элементе с float только очищает поплавок ниже других поплавков плыл в том же направлении.

Модифицированная версия исправления easyclearing может сделать трюк, но не получить надежды. Подробности см. На этой странице: New clearing method needed for IE7?.

Суть в том, что вы, вероятно, не собирается заставить это работать в IE6/7 без обмана: перемещение вниз DIV в тексте, встраивая дивы в пунктах и т.д.

источник

2009-04-27 22:48:42

Это в значительной степени поставило меня на правильный путь. Я должен был согласиться на невидимый div 1px-wide, который я могу плавать над левым боксом. Это подтолкнет его ниже 1px div, высота которого я могу установить. Не в восторге от решения, но ни один из других обходных решений не помог IE6. – dkuchler

Я довольно уверен, что это одна из тех редких ошибок в ie6, которая не имеет чистого CSS-решения.

Попробуйте использовать JavaScript IE7 - это может решить эту проблему для вас: http://code.google.com/p/ie7-js/

источник

2009-04-27 23:23:49 wheresrhys

IE не очищающий последующие поплавки

ответ

Смежные вопросы