Question

在我的网站上，我需要将{css属性overflow: overlay用于<div>。

但是，它没有在浏览器中呈现，并且对firebug中的css的检查显示它甚至不存在，但它在Chrome中可以正常工作。我没有测试过野生动物园。

我必须更改什么才能使overflow: overlay css属性正常工作？

由于

Answer 1

溢出的可能值是：

visible
hidden
auto
scroll

有关这些内容的讨论，请参阅here或here。

在不同浏览器中使用任何其他值会产生不可预测的结果，因为它们以不同的方式处理不正确的值。

修改：在评论之后，我设法找到了溢出：overlay here。

叠加描述为：

剪辑内容并在必要时添加滚动条。

重要的是，它也只能在Safari或Chrome（即WebKit）中使用。

WebKit bugzilla上的

This item表明在任何情况下这个世界都不长：

WebKit目前有一个名为“overlay”的专有CSS溢出值，它没有记录，据我所知，从阅读代码的工作原理与“auto”完全相同。

我们应该删除它或将其重命名为“-webkit-overlay”。

2016年3月更新

看起来overflow: overlay还没有消失。有迹象表明它正在进入标准。

overlay和auto之间的区别仅在于滚动条会显示在页面内容的顶部，而不会导致它占用布局空间。

请参阅here for the discussion。

Answer 2

overflow: overlay在Firefox中不起作用，但您可以在Chrome上进行叠加，而在Firefox中不添加多余的空白或填充。它并不总是完全适合Firefox，但总比没有好。

您可以使用以下代码删除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>

溢出：叠加在Firefox中不起作用

2 个答案: