溢出隐藏在 Firefox 上不起作用

Posted 2023-03-06

【中文标题】溢出隐藏在 Firefox 上不起作用

【英文标题】：Overflow hidden doesn't work on firefox

【发布时间】：2012-10-26 05:45:04

【问题描述】：

昨天我检查了一个突出显示我在一个网页主页上的产品幻灯片不是仅在 Firefox 上垂直对齐的属性，它在 IE 和 Chrome 上运行良好。

我在搜索信息时发现了很多年前关于 FF 的错误。我尝试了一些我找到的解决方案，但没有一个有效。

<div id="feature-wrap-container">
    <div id="feature_wrap">
        <div id="scrollable">
           //a list of element floating left
        </div>
    </div>
</div>

#feature-wrap-container
 background-color: #ffffff;
 width: 100%;
 height: 260px;


#feature_wrap 
 width: 960px;
 height: 260px;
 overflow:hidden;
 position: relative;
 left: 0;
 right: 0;
 margin-left: auto;
 margin-right: auto;


#scrollable 
 height:100%;

在 chrome 和 IE 上，div 位于窗口的中心，而在 Firefox 中，feature_wrap 向右对齐并使窗口大于 100%。

幻灯片基于：http://wordpress.org/extend/plugins/featured-posts-slideshow/，但明显经过修改。

提前致谢。

【问题讨论】：

有没有jsFiddle 之类的东西，你可以展示一下吗？顺便说一句，我觉得它很好。只是减小了#feature_wrap 的宽度并签入了 Firefox，它正在工作。您面临什么问题？

您是否使用过“检查元素”来检查元素上实际生效的样式以及它们的来源。这可以快速捕捉因您错过有关级联的某些内容而引起的意外。

我的主机现在关闭了...我现在无法继续调试，感谢您的帮助，也许稍后...

但问题是，在#feature_wrap 内部有一个这样的元素列表，可以在 FF 中滑动，这个列表向左浮动，在 #feature_wrap 内部，宽度大于 960px，并且我不知道为什么只有在 Firefox 中一切正常。

上一个 div 中的行高问题，早上好不好...谢谢

【参考方案1】：

看到我已经创建了你的小提琴here，它在 Firefox 中看起来很适合我。我已经减小了#feature_wrap 的宽度并签入了 Firefox，它正在工作。您面临什么问题？

获取完整图片here。

【讨论】：

在宽度大于 feature_wrap 的左浮动元素列表中添加。我认为这会导致错误。

你能更新小提琴并回复链接吗？这样我就可以修复它并送你回来。

【参考方案2】：

与其使用overflow: hidden，不如使用overflow-x: hidden, overflow-y: hidden，如下所示：

#feature_wrap 
 width: 960px;
 height: 260px;
 overflow-x :hidden;
 overflow-y: hidden;
 position: relative;
 left: 0;
 right: 0;
 margin-left: auto;
 margin-right: auto;