Internet Explorer — пробел между плавающими элементами Div

У меня возникла проблема с презентацией в Internet Explorer. Следующий простой блок кода отображается так, как я и ожидал в Safari, FireFox, Chrome и Opera. Однако это приводит к заметному пробелу между левым и правым плавающими элементами DIV как в IE6, так и в IE7.

Мой вопрос: существует ли более правильный способ добиться плавающего положения, чтобы один и тот же CSS работал как в IE, так и в других браузерах, которые я упомянул? Если нет, то как лучше всего избавиться от пробела в Internet Explorer?

Спасибо, Мэтт

<style>
.left {
    width:100px;
    float:left;
    border: solid black 1px;
}

.right {
    width: 100px;
    margin-left:100 px;
    border: solid red 1px;
}
</style>

<div class="left">
    a
</div>
<div class="right">
    b
</div>

Так как это вики сообщества. Я думал, что опубликую рабочий код с решением, предложенным ниже Plan B.

<style>
        .left {
        width:100px;
        border: solid black 1px;
        float:left;
    }

    .right {
        width:100px;
        border: solid red 1px;
        float:left;
    }
    .clear {
        clear:both;
    }
</style>

<div class="left">
    a
</div>
<div class="right">
    b
</div>
<div class="clear"></div>
c

html css internet-explorer css-float
person Community    schedule 15.01.2009    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Поместите их оба влево, добавьте следующее после обоих div:

 <div class="clear"></div>

 .clear { clear: both; }

Это или использовать отступы вместо полей.

person Community    schedule 15.01.2009
comment
Это более-менее сработало. Хотя я добавил очищающий DIV только после последнего элемента (где я хотел разрыв строки) - person Matty; 15.01.2009

arrow_upward
0
arrow_downward

Это ошибка плавающей запятой с двойным полем. Хорошо описано здесь:

http://www.positioniseverything.net/explorer/doubled-margin.html

person Community    schedule 15.01.2009
comment
Я не думаю, что это ошибка двойной маржи. Это больше похоже на баг с отступом в 3 пикселя. - person Matty; 15.01.2009

arrow_upward
-1
arrow_downward

Попробуйте добавить display: inline к плавающим элементам div. Я считаю, что это ошибка IE, связанная с добавлением дополнительных полей к плавающим элементам. display: inline работал у меня в прошлом. Надеюсь это поможет.

person Community    schedule 15.01.2009
comment
Плавающий элемент автоматически устанавливает блокировку отображения; вы не можете плавать встроенный элемент. - person Bryan A; 15.01.2009