В 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;
    /*  ...  */
}