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

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

Настройка: у меня есть div с несколькими свойствами, включая ширину, максимальную ширину и тень блока.

#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 добавляет 40 пикселей к ширине элемента div - по 20 пикселей с каждой стороны. Когда экран достаточно мал, чтобы контент попадал в атрибут ширины 100%, мы видим горизонтальную полосу прокрутки. Покопавшись в CSS, я обнаружил, что это произошло потому, что технически div был больше похож на width: 100% + 40px;

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

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


css width fluid-layout
person Will D. White    schedule 07.01.2011    source источник
comment
Извините, но, похоже, это невозможно воспроизвести. jsfiddle.net/xXXLK/1 (добавлены высота и цвет фона).   -  person mingos    schedule 07.01.2011
comment
Он отображается для меня на вашей странице во вкладке результатов. Это в Firefox 3.6.13 - если ширина установлена ​​на 100%, вы не должны видеть тень вообще до тех пор, пока экран не станет достаточно широким, чтобы передать размер максимальной ширины.   -  person Will D. White    schedule 07.01.2011

Ответы (2)


arrow_upward
9
arrow_downward

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

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

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

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

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

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

person mercator    schedule 07.01.2011
comment
Спасибо за это - по крайней мере, теперь у меня есть объяснение. - person Will D. White; 07.01.2011

arrow_upward
0
arrow_downward

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

Если вы добавите инструкцию @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; }}

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

person Jim    schedule 29.01.2011