В CSS почему комбинация "float: left; display: table; margin: x" на нескольких элементах уменьшает маржи?

При работе над макетом я решил попробовать комбинировать макет с плавающей точкой для основных столбцов с табличным расположением подэлементов. Таким образом, моя разметка html/css была следующей:

HTML:

<div class="column">
    <div class="sub-element"></div>
    <div class="sub-element"></div>
</div>
<div class="column">
    <div class="sub-element"></div>
    <div class="sub-element"></div>
</div>
...

CSS

.column {
    float: left;
    display: table;
    width: 15%;
    margin: 2%;
    /*  ...  */
}
.sub-element {
    display: table-cell;
    /*  ...  */
}

Конкретные ширины и поля не являются критическими. См. этот jsFiddle для ссылочного примера.

То, что я увидел, состояло в том, что каждый блок столбцов, идущий слева направо по странице, имел немного меньшие поля, чем последние. Поскольку никакой дополнительной разметки или CSS не было, чтобы это произошло, я был в замешательстве. После игры с разными значениями я обнаружил, что комментарий display: table вызвал нормальное поведение, которое я ожидал, например. постоянные ширины столбцов.

Теперь я могу использовать альтернативные методы для получения макета, который я хочу, это не проблема; но мне действительно интересно, почему это происходит. Любые мысли?

ИЗМЕНИТЬ

Похоже, это ошибка webkit. display: table с поплавком и полями отлично работает в Firefox. Любые предложения по исправлению для webkit для потомков?

Далее EDIT

Я просто тестировал в Safari и, похоже, там тоже работает. WTF Chrome

Окончательный EDIT

После тестирования в Firefox 18, Safari и Chrome Canary (в дополнение к стандартным Chrome), похоже, что это на самом деле ошибка Chrome.

Самое простое исправление заключается в том, чтобы добавить простой дополнительный обертку div внутри каждого из плавающих, чтобы содержать контент, и установить CSS-обложки в width: 100%; height:100%; display: table;, а затем удалить display: table из внешних элементов, которые будут перемещаться. Работает как шарм.

http://jsfiddle.net/XMXuc/8/

HTML:

<div class="column">
    <div class="sub-element-wrapper">
        <div class="sub-element"></div>
        <div class="sub-element"></div>
    </div>
</div>
<div class="column">
    <div class="sub-element-wrapper">
        <div class="sub-element"></div>
        <div class="sub-element"></div>
    </div>
</div>
...

CSS

.column {
    float: left;
    width: 15%;
    margin: 2%;
    /*  ...  */
}
.sub-element-wrapper {
    width: 100%;
    height: 100%;
    display: table;
}
.sub-element {
    display: table-cell;
    /*  ...  */
}

Ответы

Ответ 1

Этого не должно быть. Горизонтальные поля на таблицах уровня блока должны вычисляться так же, как и с любыми другими незаменяемыми элементами уровня блока, как описано в разделе раздела 10.3.3 в CSS2.1 spec, независимо от который используется алгоритм компоновки таблиц. В частности, значения процентов для полей должны рассчитываться на основе ширины содержащего блока элемента, который вы показываете в виде таблицы; поскольку все ваши элементы являются братьями и сестрами, которые имеют один и тот же родительский элемент и одинаковое процентное значение маржи, они должны быть равноудаленными, если они являются плавающими блочными блоками.

Во всех браузерах, кроме Google Chrome, элементы равноудалены, как и ожидалось. Поэтому я думаю, что это еще одна ошибка Chrome.

Если вы прокомментируете объявление display: table, которое, как вы говорите, заставляет поведение вернуться к нормальной работе, браузеры все равно будут генерировать анонимные блок-таблицы в ваших поплавках, чтобы содержать ячейки таблицы. Это не должно отрицательно влиять на макет, но если это так, я не могу комментировать дальше, поскольку я не очень хорошо знаком с тем, как макет таблицы работает с точки зрения CSS.