Question

我正在构建此页面：http://ss.rsportugal.org/

如您所见，页面中有两个10像素的阴影。一个只是在菜单下面，另一个在页脚栏上方。这些阴影使用box-shadow: 0 0 10 rgba(...);

制作

它在WebKit引擎中按预期工作，由于某种原因，我无法弄清楚，我可以使用一些新鲜的眼睛，Gecko和Opera增加5个额外像素到#header宽度而不是{{ 1}}，使一个水平滚动条出现在身体上。如果我删除盒子阴影也可以正常工作，但我有点想保留它。）：

Answer 1

多数民众赞成因为你将宽度设置为100％所以在添加了盒子阴影之后它的100％+ 10px（10px beign在两边之间划分）。如果您在标题上使用了position:fixed;，那么您就不会遇到问题。顺便说一句，它在Safari中做同样的事情，因此webkit受到影响。您可以做的是将它们包装在一个容器中并使用overflow:hidden将其设置为100％，然后在内部元素上使其也根据需要使用框阴影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

尝试选中box-sizing属性。

Webkit使用不同的盒子模型进行盒子大小调整而不是FF。 IE与两者都不同。

确保为所有浏览器声明相同类型，并且所有内容都应在同一个盒子模型中处理，因此不会产生任何令人作呕的惊喜。

Answer 3

看起来你已经修复了这个网站，但听起来这是known bug，我上周修复了这个问题（因此修复程序应该在Firefox 4 beta 8中，尽管我们还没有'尚未发布测试版7。

CSS box-shadow问题

3 个答案: