Overflow: overlay doesn't work in firefox

问题

On my website I need to use the css property overflow: overlay for a <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.

What must I change to get the overflow: overlay css property working?

Thanks

回答1:

Possible values for overflow are:

visible
hidden
auto
scroll

See here or here for 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).

This item on WebKit bugzilla suggest it is not long for this world in any case:

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".

Update March 2016

Looks like overflow: overlay hasn't gone away. There are signs of it working it's way into the standards.

The difference between overlay and auto would only be that the scrollbars would appear over the top of the page content, and not cause it to take layout space.

See here for the discussion.

回答2:

overflow: overlay doesn'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.

You can remove useless style for Firefox with this code :

@-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>

来源：https://stackoverflow.com/questions/8543664/overflow-overlay-doesnt-work-in-firefox

标签

css

firefox

cross-browser

properties

overflow