盒子阴影和 100% 流体宽度问题
我一直在完善过去一两天构建的页面，并在使用 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”属性将 40px 添加到 div 元素的宽度 - 每边 20px。当屏幕足够小，内容应达到 100% 宽度属性时，我们会看到水平滚动条。在深入研究 CSS 后，我发现这是因为 div 在技术上更像是 width: 100% + 40px;
我尝试过的： 我考虑过在父div上设置overflow:hidden，但我确实设置了最小宽度，这会使内容无法访问。我还尝试在 box-shadow CSS 中使用百分比作为大小参数 - 例如 1% - 然后将 div 的宽度设置为 98% - 但 box-shadow CSS 似乎不接受其百分比尺寸。我也考虑过使用 javascript 来测试浏览器宽度，然后相应地显示或隐藏 box-shadow 元素，但这似乎不是最佳解决方案。
必须有一种更简单的方法来处理这个问题。想法？
I've been polishing up a page I built over the past day or two and have run into an issue after using box-shadow - I was hoping someone might shed some light on an easy way to fix this.
The Setup:
I have a div that has a few properties, including width, max-width, and 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);
}
The Problem:
The "box-shadow" property adds 40px to the width of the div element - 20px on each side. When a screen is small enough that the content should hit the 100% width attribute, we see a horizontal scroll-bar. After digging through the CSS I discovered it was because the div was technically something more like width: 100% + 40px;
What I've Tried:
I've considered setting overflow:hidden on the parent div, but I do have a min-width set that would then make content inaccessible. I've also tried using a percentage for the size argument in the box-shadow CSS - 1% for example - and then setting the div's width to 98% - but the box-shadow CSS doesn't seem to accept a percentage for its size. I also have considered using javascript to test the browser width and then display or hide the box-shadow element accordingly, but it doesn't seem like the optimal solution.
There has to be a simpler way to handle this. Thoughts?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这是一个浏览器错误。
规范过去对此并不清楚，但措辞此后添加了以澄清阴影不应触发滚动：
但由于之前的遗漏，大多数浏览器确实触发了阴影滚动。现在所有最新的浏览器都已修复此问题。
在旧版浏览器中，您要么必须忍受滚动条，要么将
overflow-x:hidden添加到您的#mydiv中并希望它不会破坏任何内容，或者发现另一种添加阴影的方法（例如使用好的旧PNG）。另请参阅以下两个相关问题：
It's a browser bug.
The spec used to be unclear about this, but wording has since been added to clarify that shadows shouldn't trigger scrolling:
But as a result of this earlier omission, most browsers did trigger scrolling for shadows. This has now been fixed in all recent browsers.
In older browsers, you'll either have to live with the scrollbars, add
overflow-x: hiddento your#mydivand hope it doesn't break anything, or find another way to add shadows (e.g. using good old PNGs).Also see the following two related questions:
有一个解决方法可以解决带有框阴影的流体宽度网站中的滚动条问题。
如果您在 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 是为了让阴影在触发滚动条之前消失。
There's a workaround to the problem of scroll bars in fluid width sites with box shadow.
If you add an @media instruction in your CSS you can detect when the browser window is at a certain width (modern browsers support this and IE9 should too).
For example, for a centered pagewrap div with a max-width set to 940px, try adding this to your stylesheet:
@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;
} }
The min-width of 998px in the @media css is to make the drop shadow disappear just before it triggers the scroll bar.