блочная-тень вопросы

Question

Я строй этой страницы: http://ss.rsportugal.org/

Как вы можете видеть, есть два 10 пиксельной тень на этой странице. Один просто подшучивает над меню, а другой чуть выше нижнего колонтитула. Эти тени сделаны с использованием box-shadow: 0 0 10 rgba(...);

Он работает, как ожидалось в WebKit двигателя и по какой-то причине, что я не могу понять, и я мог бы использовать некоторые свежие глаза на это, Gecko и Opera добавить 5 дополнительных пикселей #header ширины и а не #footer-container, делая горизонтальную полосу прокрутки на теле. Также отлично работает, если я удаляю тень, но я хочу сохранить его.):

Answer 1

Thats, потому что вы установили ширину на 100%, после того, как тень коробки добавлена ​​ее 100% + 10px (10px beign, разделенный между двумя сторонами). Если вы использовали position:fixed; в заголовке, у вас не было бы проблемы. Например, он делает то же самое в Safari, поэтому webkit IS выполняется. То, что вы можете сделать, это обернуть их в контейнер и установить его на 100% с помощью overflow:hidden, а затем на внутреннем элементе сделать его также на 100% с тенью коробок по желанию .. таким образом он будет обрезаться с левой/правой стороны.

Что-то вроде:

<style type="text/css"> 
    #header { 
    background:none repeat scroll 0 0 rgba(0, 0, 0, 0.7); 
    left:0; 
    overflow:hidden; 
    position:absolute; 
    top:0; 
    width:100%; 
    z-index:4; 
    } 
    #header-inner { 
    width: 100%; 
    -moz-box-shadow: 0pt 0pt 10px rgb(0, 0, 0); 
    } 
</style> 
<div id="header"> 
<div id="header-inner"> 
    <div id="logo"> 
     ... 
    </div> 
    <div id="menu-background"></div> 
    <div id="menu-wrapper"> 
     ... 
    </div> 
</div> 
</div> 

Answer 2

Попробуйте проверить размер коробки.

Webkit использует различную коробчатую модель для выбора размера коробки, чем FF. IE отличается от обоих.

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

Answer 3

Похоже, вы уже исправили сайт, но это звучит, как это known bug, что я приземлился затруднительное за последнюю неделю (так исправление должно быть в Firefox 4 бета 8, хотя мы еще не отправили бета-версию 7).