Question

我一直在打磨我过去一两天建立的一个页面，并且在使用了box-shadow之后遇到了一个问题 - 我希望有人可以通过简单的方法解决这个问题。

设置： 我有一个具有一些属性的div，包括width，max-width和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元素的宽度增加40px - 每侧20px。当屏幕足够小以至于内容应该达到100％宽度属性时，我们会看到一个水平滚动条。通过CSS挖掘后我发现这是因为div在技术上更像宽度：100％+ 40px;

我尝试过的事情： 我考虑过设置overflow：隐藏在父div上，但我确实有一个min-width设置，然后使内容无法访问。我也尝试在box-shadow CSS中使用百分比作为大小参数 - 例如1％ - 然后将div的宽度设置为98％ - 但是box-shadow CSS似乎不接受其百分比尺寸。我也考虑使用javascript来测试浏览器宽度，然后相应地显示或隐藏box-shadow元素，但它似乎不是最佳解决方案。

必须有一种更简单的方法来处理这个问题。想法？

Answer 1

这是一个浏览器错误。

spec过去一直不清楚这个问题，但后来添加了措辞来澄清阴影不应该触发滚动：

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

但由于此前的遗漏，大多数浏览器触发了阴影滚动。现在已在所有最近的浏览器中修复此问题。

在较旧的浏览器中，您必须使用滚动条，将overflow-x: hidden添加到#mydiv并希望它不会破坏任何内容，或者找到另一种方法来添加阴影（例如，使用好旧的PNG）。

另见以下两个相关问题：

Answer 2

对于带有框阴影的流体宽度站点中的滚动条问题，有一种解决方法。

如果在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中最小宽度998px是为了让投影在触发滚动条之前消失。

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

2 个答案: