CSS 溢出：覆盖在 Firefox 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8543664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overflow: overlay doesn't work in firefox
提问by H Bellamy
On my website I need to use the css property overflow: overlayfor a <div>.
在我的网站上，我需要将 css 属性overflow: overlay用于<div>.
However, it is not rendering in the browser and an inspection of the css in firebug shows that it isn't even there, but it is as it works in Chrome. I havn't tested out safari.
但是，它没有在浏览器中呈现，并且在 firebug 中对 css 的检查表明它甚至不存在，但它在 Chrome 中工作。我还没有测试过 safari。
What must I change to get the overflow: overlaycss property working?
我必须更改什么才能使overflow: overlaycss 属性正常工作？
Thanks
谢谢
回答by Jon Egerton
Possible values for overflow are:
溢出的可能值为：
visible
hidden
auto
scroll
See hereor herefor a discussion of these.
Using any other value in different browsers will yield unpredictable results as they handle the incorrect value differently.
在不同的浏览器中使用任何其他值将产生不可预测的结果，因为它们以不同的方式处理不正确的值。
Edit: Following the comment, I've managed to find mention of overflow:overlay here.
编辑：在评论之后，我设法在此处找到了关于溢出：覆盖的提及。
overlay is described as:
覆盖描述为：
Content is clipped and scroll bars are added when necessary.
必要时剪切内容并添加滚动条。
Importantly its also said only to work in Safari or Chrome (ie WebKit).
重要的是，它也只适用于 Safari 或 Chrome（即 WebKit）。
This itemon WebKit bugzilla suggest it is not long for this world in any case:
WebKit bugzilla 上的这个项目表明这个世界在任何情况下都不长：
WebKit currently has a proprietary CSS overflow value called "overlay" which is undocumented and as far as I can tell from reading the code works exactly like "auto".
We should either remove it or rename it to "-webkit-overlay".
WebKit 目前有一个专有的 CSS 溢出值，称为“overlay”，它没有记录，据我阅读代码可以看出，它的工作方式与“auto”完全一样。
我们应该删除它或将其重命名为“-webkit-overlay”。
Update March 2016
2016 年 3 月更新
Looks like overflow: overlayhasn't gone away. There are signs of it working it's way into the standards.
好像overflow: overlay还没走 有迹象表明它正在进入标准。
The difference between overlayand autowould only be that the scrollbars would appear over the top of the page content, and not cause it to take layout space.
overlay和之间的区别auto仅在于滚动条会出现在页面内容的顶部，而不会导致它占用布局空间。
请参阅此处的讨论。
回答by Karima Rafes
overflow: overlaydoesn't work in Firefox but you can overlay for Chrome and doesn't add extra marging or padding for Firefox. It is not always prefectly align for Firefox but it's better than nothing.
overflow: overlay在 Firefox 中不起作用，但您可以覆盖 Chrome，并且不会为 Firefox 添加额外的边距或填充。它并不总是完全适合 Firefox，但总比没有好。
You can remove useless style for Firefox with this code :
您可以使用以下代码删除 Firefox 无用的样式：
@-moz-document url-prefix() {
.scrollable-nav {
padding-right: 0px !important;
}
}
.scrollable-nav {
padding-right: 14px;
max-height: 100px;
overflow-x: hidden;
overflow: overlay;
text-align:right;
width:100px;
}
@-moz-document url-prefix() {
.scrollable-nav {
padding-right: 0px !important;
}
}<ul class="scrollable-nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul class="scrollable-nav">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>