代码之家 › 专栏 › 技术社区 › Fabdrol

Firefox和CSS3:使用溢出:隐藏和框阴影

css3 firefox css

Fabdrol · 技术社区 · 16 年前

我已经为我的CMS界面准备了一个模板/框架,在一些元素上使用框阴影,宽度为100%。因为这会在元素的右侧产生阴影,所以会出现一个滚动条。为了隐藏丑陋的滚动条,我在body元素上设置了“overflow:hidden” 和在包装器上。

这导致了一些奇怪的行为。虽然没有任何滚动条,但当我使用触摸板(水平滚动)滚动时,页面仍然向右滚动。我试了很多次,用谷歌搜索过我的屁股,但我似乎找不到解决办法。。

有人知道解决问题的方法吗?或者这只是css3 box shadow冲突实现的一个例子?

7 回复 | 直到 15 年前

Jo Sprague 15 年前

我只是在设计一个设计时遇到了这个问题。基本上,Firefox为任何延伸到页面右边缘的阴影创建了一个可滚动区域。不管出于什么原因,如果阴影向左侧延伸,Firefox都不会创建可滚动区域。所以我的简单方法是把阴影完全移到左边。

有问题的代码:

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

简单解决方案:

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

我试着将x偏移设置为0px,但是由于模糊是5,所以仍然有一个大约2-3px宽的可滚动区域。

erskingardner 16 年前

既然我正在处理同样的恼人的问题,我将继续在这里插话说,这绝对是一个糟糕的功能(如果它确实应该被称为一个功能)。有一个盒子的影子,因为一个滚动条是无用的,虽然我很乐意吃我的话,如果有人能给我一个这是个很好的理由。

-moz-box-shadow .

Adam Murphy 14 年前

根据您的需要,我为自己找到的问题和解决方案可能会满足您的需要。我发现我的问题很相似,没有滚动条的时候 body { overflow: hidden; }

body{ overflow-x: hidden; } ,然后使用javascript或媒体查询,您可以轻松地更改应用于body元素的属性,并将其更改回所需的任何值。

body { overflow-x: hidden; }

@media screen and (min-width: 1200px) {
    body { overflow-x: visible; }
}

Jason Kester 16 年前

首先,当你指出别人的事情是你问题的原因时要小心。你自己想想,问题出在20万用户和20万开发人员每天使用的代码上,还是在你使用的东西上,持续4个小时。

<html>
  <body style="overflow:hidden;">
    <div style="box-shadow:whatever;">
      This should cause scrollbars to show
    </div>
  </body>
</html>

或者问题不会出现,在这种情况下,你可以慢慢地在你的真实页面上添加其他东西,直到你发现问题的真正原因。

否则问题仍然存在,在这种情况下你可以在这里向我们汇报。你还可以向Mozilla的人提交一份bug报告。

祝你好运!

user241244 user241244 16 年前

虽然听到这个消息可能会感到沮丧,但这不是一个bug,它确实是一个特性。如果有一个滚动条/可滚动区域,并且该区域被激活,并且箭头或其他输入设备正在启动,则该区域将纸卷。

为了解决这个问题,你可以尝试用javascript来对抗每一个可能的用户输入(触摸板滚动、箭头键、高亮显示和拖动),但是最好的答案是重新考虑一下你在这里是如何使用CSS的。尝试使用 width:auto width:100%

演示(更新):

#parent { width:50px; height:20px;overflow:hidden; }
#overflow { width:50px;height:50px;overflow:auto; }

HTML格式:

<div id="parent">
    <div id="overflow">blahaahhahahahahahahahahahahaaaaaaaaaaahahahahahaaaaaaaaaaaaaaahhhhhhhhhhhhhhhhhhahhaahahaha</div>
</div>

千斤顶上的高度 #parent 高达50px时,您仍然可以看到滚动条--所以它只是被掩盖了;内容并不是无可挽回地隐藏。套 overflow:hidden 在 #overflow ,并且没有滚动条。

Rich khmarbaise 15 年前

我在Firefox 3.6中修复了它(这就是我测试的全部内容),并在Google Chrome 8.0.552.327和IE 8上用以下CSS规则对我的body元素进行了跨浏览器测试:

body{
  overflow-x: hidden;
}

Lea Verou 15 年前

可以使用“扩展半径”(第4个长度)使阴影的大小小于元素的大小,然后使用较大的y偏移使其显示在元素下方。像这样的 box-shadow: 0 10px 10px -5px black;