6

我一直在完善过去一两天建立的页面，但在使用 box-shadow 后遇到了问题——我希望有人能提供一些简单的方法来解决这个问题。

设置： 我有一个 div，它有一些属性，包括宽度、最大宽度和框阴影。

#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 在技术上更像是 width: 100% + 40px;

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

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

4

2 回答 2

9

这是一个浏览器错误。

规范过去对此并不清楚，但后来添加了一些措辞，以澄清阴影不应触发滚动：

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

但是由于之前的这个遗漏，大多数浏览器确实触发了阴影滚动。这已在所有最近的浏览器中得到修复。

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

另请参阅以下两个相关问题：

于 2011-01-07T17:11:08.800 回答
0

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

如果您在 CSS 中添加 @media 指令，您可以检测浏览器窗口何时处于特定宽度（现代浏览器支持这一点，IE9 也应该支持）。

例如，对于最大宽度设置为 940px 的居中换页 div，请尝试将其添加到您的样式表中：

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

@media css 中 998px 的最小宽度是为了让投影在触发滚动条之前消失。

于 2011-01-29T20:16:54.093 回答