Firefox& CSS3：使用overflow：hidden和box-shadow [英] Firefox & CSS3: using overflow: hidden and box-shadow

问题描述

我不知道这个错误是适用于Firefox还是基于WebKit的浏览器，但它真的，真的很烦人。

I'm not sure whether this bug applies to Firefox only or also to WebKit-based browsers, but it's really, really annoying.

我有一个CMS接口的模板/框架，在一些宽度为100％的元素上使用box-shadow。因为这会在元素的右侧导致阴影，所以会出现一个滚动条。要隐藏丑陋的滚动条，我在包装器div上的body元素和上设置overflow：hidden。

I've got a template/framework for my CMS interface, using box-shadow on a few elements with a width of 100%. Since this causes shadow on the right side of the element, a scroll bar appears. To hide the ugly scrollbar, I set "overflow: hidden" on the body element and on the wrapper div.

这会导致一些奇怪的行为。虽然没有任何滚动条，当我使用我的触摸板（水平滚动）滚动页面仍然滚动到右侧。我已经尝试了很多地狱，并搜索我的屁股，但我似乎找不到这个解决方案..

This causes some strange behaviour. Though there aren't any scrollbars, the page still scrolls to the right when I scroll using my touchpad (horizontal scroll). I've tried a hell of a lot and googled my ass off, but I can't seem to find a solution for this..

任何人都知道问题解决者？或者这只是一个冲突实现css3 box-shadow的例子？

Anyone know a problem solver? or is this just an example of conflicting implementation of css3 box-shadow?

推荐答案

我刚刚有一个设计的问题工作。基本上，Firefox为超出页面右边缘的任何阴影创建一个可滚动区域。不管什么原因，如果阴影向左延伸，Firefox不会创建可滚动区域。所以我的简单解决方案是将阴影完全移动到左边。

I just had this issue with a design I was working on. Basically, Firefox creates a scrollable area for any shadow that extends past the right edge of the page. For whatever reason, Firefox doesn't create scrollable area if the shadow extends to the left. So my simple solution is to move the shadow completely to the left.

有问题的代码：

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

简单解决方案：

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

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

I tried setting the x-offset to 0px, but since the blur is 5, there was still a scrollable area about 2-3px wide.

这篇关于Firefox& CSS3：使用overflow：hidden和box-shadow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！