Странный гейзенбаг в макете CSS

Хорошо, у меня действительно странная проблема с CSS, и мне интересно, кто-нибудь может предложить объяснение.

Действия по воспроизведению:

Откройте Chrome и перейдите по http://www.mcwhinneys.com/media. Галерея фотографий должна быть выровнена, смещена вправо примерно на 50-70 пикселей. Откройте консоль разработчика в Chrome.

Ожидаемый результат:

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

Фактические результаты:

Галерея изображений выравнивается, когда открываются инструменты разработчика.

Кто-нибудь знает, почему это может произойти? Кажется, что css в порядке, когда я проверяю его, но он определенно не отображается правильно, пока консоль не была открыта.

Источник

2 ответа

Решение

Ну, настоящая причина неправильного расположения - это сочетание text-align: center на ваше ngg-gallery-thumbnail-box (Я буду называть эту коробку с этого момента) с position: absolute + display: inline-block на внутренней ngg-gallery-thumbnail (Я назову этот большой палец).

Это выглядит так:

  • Мы применяем text-align: center в коробку. Это заставит его центрировать своих встроенных детей. Он делает это (концептуально), помещая левый край каждого дочернего элемента в текущую позицию "текстового курсора" (который, что важно, начинается в центре поля), а затем перемещая его влево, чтобы "перецентрировать" его. Это - тоже важно - "работа" бокса.

  • Мы объявляем большой палец как inline-block, Это (среди прочего) заставит его следовать text-align его родителя, имея в виду, что - в данный момент - он центрирован.

  • Затем мы объявляем большой палец position: absolute, Это выведет его из потока, поместив его левый край в ту же точку, в которой он был бы изначально - потому что мы не указываем left / right,

"Наивным" толкованием этого было бы то, что он все еще находится в центре поля, и все было бы хорошо, но мы получаем "побочный эффект"...

  • Поскольку мы убрали большой палец из потока, у box больше нет встроенного содержимого, а это означает, что его текстовый курсор находится в центре, и ему не нужно ничего центрировать. Его "работа" выполнена.

  • Но так как thumb является inline-block, его исходная позиция по-прежнему основана на позиции курсора текста в центре (в центре), что означает, что, когда мы делаем его position: absolute его левый край будет расположен в этом центре. Он не центрирован по горизонтали внутри бокса, потому что с точки зрения бокса в его потоке нет дочерних элементов, которые нуждаются в центрировании.

Это на полпути к проблеме курицы и яйца, поэтому Chrome, похоже, запутывается, когда выполняет повторную визуализацию страницы для консоли.

Это объяснение также может быть немного запутанным, но вы можете увидеть результат здесь - и даже в этом простом примере консоль Chrome выполнит перекомпоновку, когда вы попытаетесь осмотреть его. В этом примере даже кажется достаточным изменить размер окна, не открывая консоль (v17.0.963.56):

http://jsfiddle.net/h66Gj/

Насколько я знаю, то, как он рендерится первым, это то, как он "должен быть" (в прошлый раз я проверял, рекомендации W3C были расплывчаты по этому поводу, но, по крайней мере, Firefox согласен с предварительным просмотром рендера).

Есть много способов обойти это, мое любимое существо, чтобы использовать только text-align: center центрировать... текст и попытаться использовать, например, margin: auto центрировать другой контент.

Источник

Это действительно трудно сказать, но похоже, что это может быть связано с взаимодействием стиля элементов с классом. ngg-gallery-thumbnail, Я бы попробовал настроить / упростить это. Вам нужен display:inline-block например, там?

Источник
Другие вопросы по тегам