火狐和 CSS3 : using overflow: hidden and box-shadow

Question

我不确定这个错误是只适用于 Firefox 还是也适用于基于 WebKit 的浏览器，但它确实非常令人讨厌。

我的 CMS 界面有一个模板/框架，在一些宽度为 100% 的元素上使用了 box-shadow。由于这会导致元素右侧出现阴影，因此会出现一个滚动条。为了隐藏丑陋的滚动条，我在包装器 div 的主体元素 和 上设置了“溢出:隐藏”。

这会导致一些奇怪的行为。虽然没有任何滚动条，但当我使用触摸板(水平滚动)滚动时，页面仍会向右滚动。我已经尝试了很多，并用谷歌搜索了我的屁股，但我似乎找不到解决这个问题的方法..

有人知道问题解决者吗？还是这只是 css3 box-shadow 实现冲突的一个例子？

Answer 1

我刚刚在设计时遇到了这个问题。基本上，Firefox 为任何超出页面右边缘的阴影创建了一个可滚动区域。无论出于何种原因，如果阴影向左延伸，Firefox 都不会创建可滚动区域。所以我的简单解决方案是将阴影完全移到左侧。

有问题的代码:

-moz-box-shadow: 5px 5px 5px #000;

简单的解决方案:

-moz-box-shadow: -5px 5px 5px #000;

我尝试将 x-offset 设置为 0px，但由于模糊度为 5，仍然有一个大约 2-3px 宽的可滚动区域。