Chrome таинственным образом добавляет 3px к ширине нижнего колонтитула

Question

Нижний колонтитул на моем сайте Atlantic Sentinel имеет ширину, указанную в 960px, и максимальную ширину также в 960px.В IE это выглядит хорошо, но Chrome добавляет 3px к ширине.Почему, я не могу понять это.

Вот соответствующий CSS:

#colophon {
clear: both;
display: table;
width: 960px;
max-width: 960px;
background: #131313;
overflow: hidden;
border-top: 3px solid #0099cc;}

#colophon .widget {
display: table-cell;
float: left;
width: 22%;
margin: 2em 0 2em 2em;
background: #000;
color: #ccc;
text-align: justify;}

Это не поля на виджетах.Я попытался удалить один, так что есть только три виджета, шириной 22%, и дополнительные 3 пикселя все еще есть в Chrome.

Что мне не хватает?

Answer 1

попробуйте display:inline; код вместо display: table-cell;, а затем посмотрите, достигли ли вы ???

Answer 2

Это похоже на ошибку в webkit, чтобы исправить это, просто установите нижний колонтитул, чтобы явно свернуть границы, которые вы добавили в верхний колонтитул, следующим образом:

#colophon {
 border-collapse: collapse;
}

Обязательно удалите декларацию overflow:hidden, так как она больше не нужна.

EDIT. Да, ошибка. Удалось воссоздать его здесь, http://jsfiddle.net/PnYPr/. Та же проблема, что и у OP в webkit. Отправит отчет об ошибке.

РЕДАКТИРОВАТЬ 2. Ошибка сообщили.

Answer 3

Удалить правило display: table;. В этом нет необходимости, и вам не нужно менять его на что-либо еще, например display: block, так как это значение по умолчанию, и вы не отменяете это в своем примере.