盒阴影和100%流体宽度问题

Question

我最近在优化一个我在过去一两天内构建的页面，使用了 box-shadow 后遇到了问题 - 希望有人能够提供一个简单的解决方法。

背景信息： 我有一个 div 元素，其中包含一些属性，包括宽度、最大宽度和 box-shadow。

#mydiv {  
       width:100%;
       max-width:1200px;
       -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
       -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
       box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
}

问题： "box-shadow"属性会将div元素的宽度增加40像素，每侧20像素。当屏幕足够小以至于内容应该达到100%的宽度属性时，我们会看到水平滚动条。经过查找CSS，我发现这是因为div实际上是类似于width: 100% + 40px;的东西。

我尝试过： 我考虑在父div上设置overflow:hidden，但我已经设置了min-width，这将使内容无法访问。我也尝试使用box-shadow CSS中的百分比大小参数 - 例如1% - 然后将div的宽度设置为98% - 但是box-shadow CSS似乎不接受其大小的百分比。我还考虑使用javascript测试浏览器宽度，然后相应地显示或隐藏box-shadow元素，但这似乎不是最佳解决方案。

一定有更简单的方法来处理这个问题。您有什么想法？

- Will D. White

---

抱歉，但似乎无法再现。http://www.jsfiddle.net/xXXLK/1/（添加了高度和背景颜色）。 - mingos

在你的页面上，它在结果选项卡中为我显示出来。这是在Firefox 3.6.13版本中 - 如果将宽度设置为100％，直到屏幕足够宽以超过最大宽度尺寸之后，你才能看到阴影。 - Will D. White

Answer 1

这是一个浏览器的bug。

规范 曾经对此不够明确，但现在已经添加了文字来澄清阴影不应该触发滚动：

阴影不会触发滚动或增加可滚动区域的大小。

但由于此前的遗漏，大多数浏览器仍然会为阴影触发滚动。这个问题现在已经在所有最近的浏览器中得到了解决。

在旧版浏览器中，您可以选择接受滚动条，给您的 #mydiv 添加 overflow-x: hidden 以期望不会出现问题，或者找到其他添加阴影的方法（例如使用老式的PNG）。

还可以参考以下两个相关问题：

• Firefox和CSS3：使用overflow：hidden和box-shadow
• 容器div上的CSS框阴影会导致滚动条

- mercator

---

谢谢你，至少现在我有一个解释了。 - Will D. White

Answer 2

在流式宽度站点中，有一个解决滚动条问题的变通方法，使用 box shadow。

如果在 CSS 中添加 @media 指令，您可以检测浏览器窗口是否达到了某个宽度（现代浏览器支持此功能，IE9 也应该支持）。

例如，对于一个将最大宽度设定为 940px 的居中 pagewrap div，请尝试将以下内容添加到样式表中：

@media screen and (min-width: 998px) { div#pagewrap { -moz-box-shadow: 3px 8px 26px #a1a09e; -webkit-box-shadow: 3px 8px 26px #a1a09e; box-shadow: 3px 8px 26px #a1a09e; } }

@media css 中的 min-width 为 998px，以便在触发滚动条之前使阴影消失。

- Jim