CSS box-shadow проблемы - PullRequest
Новая
       29

CSS box-shadow проблемы

1 голос
/ 12 октября 2010

Я создаю эту страницу: http://ss.rsportugal.org/

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

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

Ответы [ 3 ]

2 голосов
/ 12 октября 2010

Это потому, что вы установили ширину на 100%, поэтому после добавления тени от блока ее 100% + 10px (beign 10px, разделенный между двумя сторонами). Если вы используете position:fixed; в заголовке, у вас не будет проблемы. Кстати, он делает то же самое в Safari, поэтому webkit ЕСТЬ. То, что вы могли бы сделать, это обернуть их в контейнер и установить его на 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>
0 голосов
/ 12 октября 2010

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

0 голосов
/ 12 октября 2010

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

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

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

...