inline-block элементы, использующие overflow: hidden, позиционируют себя так, чтобы их нижнее поле было базовой линией. Из http://www.w3.org/TR/CSS2/visudet.html#leading:
Базовая линия «встроенного блока» — это базовая линия его последнего блока строки в обычном потоке, если только он не имеет блоков строк в потоке или если его свойство «переполнение» имеет вычисленное значение, отличное от «видимого», в в этом случае базовая линия является нижним краем поля.
На практике это означает, что эти элементы неожиданно сдвигаются вверх; например, внутри <td> элемент не будет центрирован по вертикали. Более простой пример:
div {
border: 1px solid red;
text-decoration: underline;
}
.ib {
display: inline-block;
}
.h {
overflow: hidden;
}<div>
<div class="ib">Visible</div>ABgjh</div><br>
<div>
<div class="ib h">Hidden</div>ABgjh</div>div с overflow: hidden не имеют той же базовой линии, что и окружающая их линия.
Я ищу простой способ заставить этот div выровнять себя, как если бы он следовал обычным правилам для элементов inline-block. По сути, я хочу написать пользовательский элемент, который «просто работает», независимо от того, применяет ли его потребитель стиль vertical-align или помещает его внутри <td> и т. д.
В этой таблице есть пример, где я хочу, чтобы элемент центрировался по вертикали, но вместо этого он подталкивал себя вверх (и остальная часть строки вниз).
В этой скрипте есть больше примеров, показывающих, как разные пары вертикального выравнивания ведут себя неожиданно, когда один элемент равен display: inline-block; overflow: hidden.
Чтобы было ясно, этот вопрос спрашивает, можно ли обернуть <div style="overflow: hidden"> таким образом, чтобы его можно было рассматривать как обычный элемент inline-block, разумно позиционируя себя, без настройки пикселей на основе JS или шрифта. Я хотел бы иметь возможность применить стиль к конечному компоненту, чтобы расположить или выровнять его по своему усмотрению, как если бы это был обычный элемент inline-block.
