容器 div 上的 CSS 框阴影导致滚动条

Question

我有一个具有以下设置的网站:

<div id="container">
   <div id="header"></div>
   <div id="content"></div>
   <div id="clearfooter"></div>
</div>
<div id="footer"></div>

我在容器外使用 clearfooter 和页脚，以便在内容不足时将页脚保持在页面底部。

我的问题是我想通过以下方式在容器 div 上应用框阴影:

#container {width:960px; min-height:100%; margin:0px auto -32px auto; 
           position:relative; padding:0px; background-color:#e6e6e6; 
           -moz-box-shadow: -3px 0px 5px rgba(0,0,0,.8), 
           3px 0px 5px rgba(0,0,0,.8);}
#header   {height:106px; position:relative;}
#content   {margin:0px; padding:10px 30px 10px 30px; position:relative;}
#clearFooter {height:32px; clear:both; display:block; padding:0px; margin:0px;}
#footer   {height:32px; padding:0px; position:relative; width:960px; 
           margin:0px auto 0px auto;}

如您所见，它在容器 div 的每一侧都有一个投影。然而，在这样做时，当内容没有占据整个高度时，由于模糊，阴影推过页脚底部仍然会导致滚动条。

有什么方法可以防止阴影越过容器 div 的边缘并导致滚动条吗？

感谢您的帮助!

Answer 1

Webkit 最近改变了它的行为，如下所示: http://archivist.incutio.com/viewlist/css-discuss/109662

事实上，直到今天它仍然是 Gecko 和其他浏览器中的一个问题。

---

我设法使用负边距解决了 Gecko 上的这个讨厌的问题，它也适用于所有其他浏览器。

假设您有一个全屏元素 (E)，其中应用了零偏移和模糊半径 R 的框阴影。假设您正在处理水平滚动条问题，因为阴影导致元素 E 以增加的宽度重新布局。

1. 用辅助包装器元素 (W) 包装 E
2. 设置溢出:在 W 上隐藏
3. 设置填充:W 上的 R 0 R 0
4. 设置边距:W上的-R 0 -R 0

想法是使用 overflow hidden 来剪掉左右有问题的阴影。然后使用 padding+negative margin 技巧来不剪裁顶部和底部阴影，并使框在 HTML 流中保持在同一位置。

您可以采用此技术来剪掉有问题的阴影框的任意边。