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

Question

我一直在打磨我过去一两天建立的一个页面,在使用了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在技术上更像宽度:100%+ 40px;

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

必须有一种更简单的方法来处理这个问题.思考？

Answer 1

这是一个浏览器错误.

该规范曾经不清楚这一点,但后来添加了措辞以澄清阴影不应该触发滚动:

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

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

在较旧的浏览器中,你要么必须使用滚动条,添加overflow-x: hidden到你的#mydiv希望它不会破坏任何东西,或者找到另一种方法来添加阴影(例如使用好的旧PNG).

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

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