поле css: автоматическое нецентрирование div в браузерах webkit (Chrome и Safari) при максимальном / полноэкранном режиме

#html #css #webkit #overflow #margin

#HTML #css #webkit #переполнение #поля

Вопрос:

Я не смог определить причину этой проблемы, поэтому я не могу отобразить тестовый пример, вместо этого я сузил свой код до страницы, которая все еще содержит ошибку, без лишних усилий.
Вот ссылка:
http://www.richard-walsh.limewebs.com/Disk-Edits/index.html

Проблема в том, что div содержимого (id = content) не центрируется в Chrome и Safari.
Оно расположено справа.

Содержимое div окружено div, называемым bottom, ширина которого: 100%; и высота: auto;.

 #bottom{
    width:100%;
    height:auto;
    padding:0px;
    margin:0px;
}

#content{
    width:862.4px;
    height:402px;
    margin:auto;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
    background-color:#030303;
    background-image:url(images/main.png);
    -moz-border-radius:15px;
    border-radius:15px;
    border-style:solid;
    border-color:#181818;
    border-width:4px;
    margin-top:60px;
    -moz-box-shadow: 1px 1px 20px 4px black;
    -webkit-box-shadow: 1px 1px 20px 4px black;
    box-shadow: 1px 1px 20px 4px black;
    overflow:hidden;
}

Я обнаружил, что если я удалю overflow: hidden из css содержимого, то оно правильно центрируется.
Но мне это нужно (для частей, не показанных в ссылке)

Я также обнаружил, что это работает, если я полностью удаляю меню. Итак, я думаю, что в меню css должно быть что-то, что вызвало это. Это отлично работает в Firefox (4).

Я использую Chrome 11.0.696.68 и Safari 5.0.5

О! Я только что заметил, что это происходит только при максимизации Chrome, когда он находится в «режиме окна» (за неимением лучшего названия), он идеально центрируется, даже если окно растянуто на весь размер экрана.

Я также заметил, что если вы удалите #copyright, то #content отображается слева, а если удалить и #copyright, и #choice, то содержимое div отображается в центре, и если вы удалите только #choice, оно все равно отображается справа.

Если вы удалите #menu_all, то он правильно центрируется.

Любая помощь была бы высоко оценена,
спасибо

1. К вашему сведению — не очень хорошая идея использовать значения субпикселей. Браузеры округляют до целых пикселей (поскольку пиксель является наименьшей единицей измерения, понятной браузеру), и каждый браузер округляет по-разному — ejohn.org/blog/sub-pixel-problems-in-css

2. хм, это достаточно справедливо. Я работаю с шаблоном, ширина которого указана точно, но я предполагаю, что он будет работать так же, если я просто округлю в любую сторону.

Ответ №1:

Добавьте display: block, посмотрите, работает ли это.

Ответ №2:

Решение:
у div над содержимым div (#copyright) не было объявленного значения высоты. Объявление значения высоты (35 пикселей) устранило проблему, с которой я сталкивался в chrome / safari.

высота: автоматически; не сработало.

Это не объясняет, почему, когда раздел содержимого был размещен непосредственно под разделом авторских прав, это сработало. Но все же. Это было работоспособное решение. Итак, если у вас аналогичная проблема, проверьте, что у div выше указана высота.

Ответ №3:

 <div id="content" class="post"></div>

Находится не в #middle, а в #bottom.
Если вы переместите это вверх, макет, похоже, будет работать правильно.