CSS box-shadow 问题答案

【问题标题】：CSS box-shadow issuesCSS box-shadow 问题
【发布时间】：2010-10-12 00:30:06
【问题描述】：

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

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

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

【问题讨论】：

您是否尝试在保证金声明中添加“！important”？
是的，但没有帮助。

标签： firefox opera gecko css

【解决方案1】：

那是因为你将宽度设置为 100%，所以在添加 box-shadow 之后，它的 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>

【讨论】：

它在 OSX Safari 5 上显示良好，但我不知道 windows 版本。无论如何，我已更改为“位置：固定”，因为这是预期的方式，但我很困。尽管如此，它在 webkit 和 gecko 上运行良好，但在 Opera 上仍然可以做同样的事情。我真的不想添加另一个 div，但我想我必须这样做。 ):
Opera 正在缓存预置页面，所以请忽略我所说的。

【解决方案2】：

尝试检查 box-sizing 属性。

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

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

【讨论】：

【解决方案3】：

看起来您已经修复了该网站，但听起来这是我上周修复的 known bug（所以修复应该在 Firefox 4 beta 8 中，虽然我们还没有发布beta 7）。

【讨论】：

好吧，Opera 仍然有这个问题，但我想我会像 prodigitalson 建议的那样添加另一个包装器 DIV。
请忽略我最后的评论。 Opera 正在缓存预先固定的页面。