IE не очищает последующие поплавки - PullRequest
Новая
       11

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

3 голосов
/ 28 апреля 2009

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

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

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

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>

Ответы [ 2 ]

6 голосов
/ 28 апреля 2009

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

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

Суть в том, что вы, вероятно, не добьетесь того, чтобы это работало в IE6 / 7 без обмана: смещение div в тексте, вставка div в абзацы и т. Д.

0 голосов
/ 28 апреля 2009

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

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

...