При использовании веб-инспекторов браузеров я столкнулся с двумя разными и нестандартными свойствами для атрибута CSS vertical-align.
-webkit-baseline-middle доступен только в Chrome, а -moz-middle-with-baseline доступен в Firefox. Именование аналогично, но не то же самое.
Я не мог найти никакой информации об этих двух в Интернете. Они даже не перечислены на MDN.
Мои вопросы:
@VSG24:
Являются ли они частью любых стандартов?
Оба свойства не являются частью каких-либо стандартов, в соответствии с ссылкой W3C CSS. Они, по-видимому, используются Webkit и Gecko для правильной работы, как и ожидалось в спецификации CSS 2.1:
Совместите вертикальную середину поля с базовым полем родительского поля плюс половину x-высоты родителя.
спецификации CSS 2.1, p170
@VSG24:
Каково ожидаемое поведение при их использовании?
После некоторого поиска в Интернете, вот что я нашел о -webkit-baseline-middle в Справка CSS Safari:
vertical-align: -webkit-baseline-middle:
Центр элемента выравнивается с базовым текстом текста.
Мне не удалось получить информацию о -moz-middle-with-baseline кроме этого:
Q: Webkit-baseline-middle - есть альтернативы?
A: то же самое, только для Mozilla
vertical-align: -moz-middle-with-baseline;
Ниже приведен тест, вы можете попробовать его с помощью браузеров на базе Webkit (таких как Chrome) и Gecko (Firefox):
div {
width: 150px;
display: inline-block;
}
.container {
background: hotpink;
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 100%;
z-index: -1;
}
.reference {
background: darkblue;
height: 200px;
}
.standard {
background: teal;
height: 120px;
vertical-align: middle;
}
.moz {
background: antiquewhite;
height: 80px;
vertical-align: -moz-middle-with-baseline;
}
.webkit {
background: darksalmon;
height: 90px;
vertical-align: -webkit-baseline-middle
}<div class="container"></div>
<div class="reference"></div>
<div class="standard"></div>
<div class="moz"></div>
<div class="webkit"></div>