Переполнение: наложение не работает в Firefox

Question

На моем сайте мне нужно использовать свойство css overflow: overlay для <div>.

Однако, это не рендеринг в браузере, и проверка CSS в Firebug показывает, что его даже нет, но он работает так же, как в Chrome Я не проверял сафари.

Что я должен изменить, чтобы свойство overflow: overlay css работало?

Спасибо

Answer 1

Возможные значения для переполнения:

visible
hidden
auto
scroll

См. здесь или здесь для их обсуждения.

Использование любого другого значенияв разных браузерах будут давать непредсказуемые результаты, так как они по-разному обрабатывают неправильное значение.

Редактировать : После комментария мне удалось найти упоминание о переполнении: overlay здесь .

Оверлей описывается следующим образом:

Содержимое обрезается, и при необходимости добавляются полосы прокрутки.

Важно, что он также работает только вSafari или Chrome (т. Е. WebKit).

Этот элемент в bugzilla WebKit предполагает, что в любом случае это не долго для этого мира:

WebKit в настоящее время имеетЗапатентованное значение CSS overflow, называемое «overlay», которое недокументировано и насколько я могу судить по чтению кода, работает точно так же, как «auto».

Мы должны либо удалить его, либо переименовать в «-webkit-overlay».

Обновление март 2016

Похоже, overflow: overlay не ушло.Есть признаки того, что он работает в соответствии со стандартами.

Разница между overlay и auto будет заключаться только в том, что полосы прокрутки будут отображаться поверх содержимого страницы, а не заставлять его приниматьпространство макета.

См. здесь для обсуждения .

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>