box-shadow и 100% проблема ширины жидкости

Question

Я полировал страницу, которую создал за последние день или два, и столкнулся с проблемой после использования box-shadow - я надеялся, что кто-то может пролить свет на простой способ исправить это.

Настройка: У меня есть div, у которого есть несколько свойств, включая width, max-width и box-shadow.

#mydiv {  
       width:100%;
       max-width:1200px;
       -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
       -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
       box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
}

Проблема: Свойство box-shadow добавляет 40px к ширине элемента div - 20px с каждой стороны.Когда экран достаточно мал, чтобы контент попадал в атрибут ширины 100%, мы видим горизонтальную полосу прокрутки.Покопавшись в CSS, я обнаружил, что технически div больше напоминает ширину: 100% + 40px;

Что я пробовал: Я рассмотрел настройку переполнения: скрытона родительском div, но у меня есть набор минимальной ширины, который делает содержимое недоступным.Я также попытался использовать процент для аргумента размера в CSS box-shadow - например, 1% - и затем установить ширину div на 98% - но CSS box-shadow, кажется, не принимает процент для егоразмер.Я также рассмотрел использование javascript для проверки ширины браузера, а затем соответственно отобразить или скрыть элемент box-shadow, но это не кажется оптимальным решением.

Должен быть более простой способ справиться с этим,Мысли?

Answer 1

Это ошибка браузера.

Раньше spec неясно, но с тех пор добавлена ​​формулировка, поясняющая, что тени не должны вызывать прокрутку:

Тени не вызывают прокрутку и не увеличивают размер области прокрутки.

Но в результате этого более раннего упущения большинство браузеров сделали прокрутку прокрутки для теней. Это было исправлено во всех последних браузерах.

В старых браузерах вам придется либо жить с полосами прокрутки, добавить overflow-x: hidden к вашему #mydiv и надеяться, что он ничего не сломает, либо найти другой способ добавления теней (например, используя старые добрые PNG) .

Также см. Следующие два связанных вопроса:

• Firefox & CSS3: использование переполнения: скрытое и скрытое в тени
• Тень блока CSS на элементе div контейнера вызывает полосы прокрутки

Answer 2

Существует обходной путь для полос прокрутки на узлах с изменяющейся шириной с тенями.

Если вы добавите инструкцию @media в свой CSS, вы сможете определить, когда окно браузера имеет определенную ширину (современныйбраузеры поддерживают это, и IE9 тоже должен это делать).

Например, для центрированного div-обертки с максимальной шириной, равной 940 пикселей, попробуйте добавить это в таблицу стилей:

@ media screen и (min-width: 998px) {div # pagewrap {-moz-box-shadow: 3px 8px 26px # a1a09e;-webkit-box-shadow: 3px 8px 26px # a1a09e;тень от рамки: 3px 8px 26px # a1a09e;}}

Минимальная ширина 998px в @media css должна сделать так, чтобы тень падала как раз перед тем, как она запустит полосу прокрутки.