Internet Explorer - пространство между плавающими делениями

Question

Я столкнулся с проблемой презентации в 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.

<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

Answer 1

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

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

 .clear { clear: both; }

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

Answer 2

.body {
    padding:0px;
    margin:0px;
}

Answer 3

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

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

Answer 4

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