1

我正在建立这个页面：http ://ss.rsportugal.org/

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

它在 WebKit 引擎中按预期工作，出于某种原因，我无法弄清楚，我可以用一些新的眼光来看待这个问题，Gecko 和 Opera 将 5 个额外的像素添加到#header宽度而不是#footer-container，使水平滚动条出现在主体上。如果我删除盒子阴影也可以正常工作，但我有点想保留它。):

4

3 回答 3

2

那是因为你将宽度设置为 100%，所以在添加了 box-shadow 之后，它的 100%+10px（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>
于 2010-10-12T00:34:23.027 回答
0

尝试检查 box-sizing 属性。

Webkit 使用与 FF 不同的 box-model 进行 box-sizing。IE不同于两者。

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

于 2010-10-12T00:33:53.613 回答
0

看起来您已经修复了该网站，但听起来这是我上周修复的一个已知错误（因此修复应该在 Firefox 4 beta 8 中，尽管我们还没有发布 beta 7） .

于 2010-10-12T05:21:29.540 回答