CSS 框阴影问题

Question

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

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

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

Answer 1

那是因为您已将宽度设置为 100%，因此在添加盒阴影后，其宽度为 100%+10px（10px 在两侧之间划分）。如果您也在标题上使用 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

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