box-shadow 和 100% 流体宽度问题 [英] box-shadow and 100% Fluid Width Issue
问题描述
过去一两天我一直在完善我构建的一个页面，但在使用 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.
设置:我有一个 div，它有一些属性，包括宽度、最大宽度和框阴影.
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);
}
问题:box-shadow"属性将 div 元素的宽度增加 40 像素 - 每边 20 像素.当屏幕足够小以至于内容应该达到 100% 宽度属性时，我们会看到一个水平滚动条.在深入研究 CSS 之后，我发现这是因为 div 在技术上更像是 width: 100% + 40px;
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;
我的尝试:我考虑过设置溢出:隐藏在父 div 上，但我确实有一个最小宽度集，这会使内容无法访问.我还尝试在 box-shadow CSS 中对 size 参数使用百分比 - 例如 1% - 然后将 div 的宽度设置为 98% - 但 box-shadow CSS 似乎不接受其百分比尺寸.我也考虑过使用javascript来测试浏览器的宽度，然后相应地显示或隐藏box-shadow元素，但这似乎不是最佳解决方案.
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?
推荐答案
这是一个浏览器错误.
规范过去对此并不明确，但后来添加了措辞以澄清阴影不应触发滚动:
The spec used to be unclear about this, but wording has since been added to clarify that shadows shouldn't trigger scrolling:
阴影不会触发滚动或增加可滚动区域的大小.
Shadows do not trigger scrolling or increase the size of the scrollable area.
但由于之前的遗漏，大多数浏览器确实触发了阴影滚动.现在已在所有最新浏览器中修复此问题.
But as a result of this earlier omission, most browsers did trigger scrolling for shadows. This has now been fixed in all recent browsers.
在较旧的浏览器中，您要么不得不忍受滚动条，将 overflow-x: hidden 添加到您的 #mydiv 并希望它不会破坏任何东西，或者找到另一种添加阴影的方法(例如使用旧的 PNG).
In older browsers, you'll either have to live with the scrollbars, add overflow-x: hidden to your #mydiv and 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:
这篇关于box-shadow 和 100% 流体宽度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
