Question

我不确定这个错误是仅适用于Firefox还是适用于基于WebKit的浏览器，但它真的非常烦人。

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

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

任何人都知道问题解决者？或者这仅仅是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宽的可滚动区域。

Answer 2

由于我正在处理同样烦人的问题，我会继续并在这里说这绝对是一个糟糕的功能（如果它确实应该被称为一个功能）。有一个盒子阴影导致滚动条是没用的，但是如果有人能给我一个真的这个理由应该是这样的话，我很乐意吃掉我的话。那。

我认为这里的答案只是让页面略有不同，让firefox用户错过了盒子阴影。如果您没有声明-moz-box-shadow，那就够了。

Answer 3

跳至第二段以获得实际解决方案。

根据您的需要，我找到的问题和解决方案可能会满足您的需求。我发现我的问题非常相似，body { overflow: hidden; }时没有滚动条，我相信，原因是html和body元素的大小实际上取决于浏览器窗口可视区域的大小。

解决方案：如果您只发出x轴上的溢出，您可以执行body{ overflow-x: hidden; }，然后使用javascript或媒体查询，您可以轻松更改应用于body元素的属性并将其更改回任何你请。

示例：

body { overflow-x: hidden; }

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

希望这会有所帮助。

Answer 4

首先，在指出别人的事情时要小心你的问题。想想更有可能的问题是，问题在于每天200k用户和20k开发人员使用的代码片段，或者是你使用的东西，现在是4小时。

那就是说，你的下一步应该是将其缩减为一个简单的测试页面，其中包含足够的HTML来演示行为。在您的情况下，这将是这样的页面：

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

将会发生以下两件事之一：

问题不会出现，在这种情况下，您可以慢慢添加现实页面上的其他内容，直到找到实际导致问题的内容为止。

或问题仍然存在，在这种情况下，您可以在此处向我们报告。然后，您还可以向Mozilla人员提交错误报告。

祝你好运！

Answer 5

虽然听到这可能令人沮丧，但这不是一个错误，它确实是一个功能。如果有一个滚动条/可滚动区域，并且该区域已激活并且箭头或其他输入设备正在激活，则区域将滚动。

要抵消这种情况，您可以尝试使用javascript来对抗每个可能的用户输入（触摸板滚动，箭头键，突出显示和拖动），但最好的答案是重新考虑如何在这里使用CSS。例如，尝试使用width:auto代替width:100%。

演示（更新）：

CSS：

#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，没有滚动条。

Answer 6

我不知道你网站的布局，但在我的网站上我只想要垂直滚动，而不是横向滚动。这就是为什么导致水平滚动的盒子阴影对我来说不合需要的基础，因为我现在的网站的CSS是为在视口之外水平蔓延的布局构建的。

我能够在Firefox 3.6中修复它（这是我测试过的全部内容），并在我的body元素上使用以下CSS规则对Google Chrome 8.0.552.327和IE 8进行跨浏览器测试：

body{
  overflow-x: hidden;
}

Answer 7

您可以使用展开半径（第4个长度）使阴影的大小小于元素的大小，然后使用较大的y偏移使其显示在元素下方。像box-shadow: 0 10px 10px -5px black;之类的东西（当然我不知道你需要什么价值，因为你没有提供小提琴，你需要在开发工具中使用它们）。请记住，扩散半径会使阴影从各个方向扩展/收缩。因此，例如，-1px的扩散半径实际上会使阴影2px变窄。

Firefox＆amp; CSS3：使用overflow：hidden和box-shadow

7 个答案: