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

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

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

Screenshot

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

With vertical-align: middle

Ответы

Ответ 1

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

Попробуйте следующее:

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

Update:

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

В соответствии с W3C CSS2 Рабочий чертеж Подробнее...,

Базовый уровень "встроенного блока" базовая линия последней строки строки в нормальный поток, если он не имеет нет строк в потоке или если их Свойство "переполнения" имеет вычисленное значение значение, отличное от "видимого", в котором если базовым является нижний предел края.

Ответ 2

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

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

Ответ 3

попробуйте 

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

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