CSS: почему вертикальное выравнивание: базовая линия перестает работать в Firefox при использовании переполнения: скрыто?

Question

Вы можете воспроизвести это, запустив контрольный пример .Результаты показаны на скриншоте ниже.Проблема в том, что в Firefox при добавлении overflow: hidden к «блоку» (с серым фоном на скриншоте) блок перестает выравниваться, как мне бы хотелось: вместо базовой линии текста вблок выравнивается по базовой линии родительского блока, как если бы нижняя часть блока была выровнена по базовой линии родительского блока.Как вы можете видеть на скриншоте, этого не происходит с Chrome.

1. Это ошибка Firefox?
2. Как получить ожидаемый результат в Firefox (выравнивание базовой линии с помощью overflow: hidden)?

Примечание. Использование vertical-align: middle для «блока» не обрезает его, поскольку я действительно хочу выравнивания базовой линии.Вы можете более четко увидеть, что vertical-align: middle не выполняет выравнивание базовой линии, установив padding: 1em 0 .1em 0 (больше отступов в верхней части окна), что дает вам:

Answer 1

Это выглядит как переполнение: скрытый глючит в том, что он удаляет базовую линию из элемента inline-block. К счастью, существует избыточное значение расширения Mozilla CSS для переполнения, которое предотвращает переполнение, но не демонстрирует такого ошибочного поведения.

Попробуйте это:

.block {
    width: 10em; padding: .3em 0 .1em 0;
    overflow: hidden;
    overflow: -moz-hidden-unscrollable;
    white-space: nowrap;
    display: inline-block;
    border: 1px solid #666; background-color: #eee;    
}

Похоже, что это исправляет проблему в Firefox и не связывается с Safari.

Обновление:

Похоже, что Firefox и Opera визуализируют переполнение: скрытые встроенные блоки правильно, а браузеры Webkit - нет.

В соответствии с моделью визуального форматирования рабочего документа W3C CSS2 ,

Базовая линия «встроенного блока» базовая линия последней строки в окне нормальный поток, если он не имеет нет коробок в потоке или если его свойство 'overflow' имеет вычисленный значение, отличное от «видимого», в котором если базовая линия является нижним полем край.

Answer 2

попробуйте добавить vertical-align: text-bottom; к .block

Вы также можете попытаться установить одинаковую высоту строки для .label и .block

Answer 3

попробуй

.label {
        float: left;
        line-height: 30px;
        margin-right: 5px;
        }

это даст желаемый результат как в FF, так и в Chrome / Safari. Однако не проверял в IE.