设置:
我有一个具有一些属性的div,包括width,max-width和Box-shadow.
#mydiv { width:100%; max-width:1200px; -webkit-Box-shadow: 0px 0px 20px rgba(0,1); -moz-Box-shadow: 0px 0px 20px rgba(0,1); Box-shadow: 0px 0px 20px rgba(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元素,但它似乎不是最佳解决方案.
必须有一种更简单的方法来处理这个问题.思考?
解决方法
spec曾经不清楚这个,但是后来添加了措辞来澄清阴影不应该触发滚动:
Shadows do not trigger scrolling or increase the size of the scrollable area.
但由于此前的遗漏,大多数浏览器确实触发了阴影滚动.现在已在所有最近的浏览器中修复此问题.
在较旧的浏览器中,您要么必须使用滚动条,要将overflow-x:hidden添加到#mydiv并希望它不会破坏任何内容,或者找到另一种添加阴影的方法(例如使用好的旧PNG).
另请参阅以下两个相关问题:
> Firefox & CSS3: using overflow: hidden and box-shadow
> CSS box shadow on container div causes scrollbars