在使用浏览器网络检查器时，我遇到了 CSS 属性 vertical-align 的两个不同且非标准的属性。
-webkit-baseline-middle 仅在 Chrome 中可用，而 -moz-middle-with-baseline 在 Firefox 中可用。命名相似但不相同。
我在网上找不到关于这两个的任何信息。他们甚至没有在MDN 上列出。
我的问题：
【问题讨论】：
标签： css vertical-alignment vendor-prefix
@VSG24：
它们是任何标准的一部分吗？
根据 W3C CSS 参考，这两个属性都不属于任何标准。它们似乎只被 Webkit 和 Gecko 用于正确运行，正如 CSS 2.1 规范中所预期的那样：
将框的垂直中点与父框的基线加上父框 x 高度的一半对齐。
CSS 2.1 specs, p170
@VSG24：
使用它们时的预期行为是什么？
在网上搜索后，我在Safari CSS Reference 上找到了关于-webkit-baseline-middle 的内容：
vertical-align: -webkit-baseline-middle:
元素的中心与文本的基线对齐。
除了这个之外，我无法获得有关 -moz-middle-with-baseline 的任何信息：
问：Webkit-baseline-middle - 有替代方案吗？
答：相同，仅适用于 Mozilla
>vertical-align: -moz-middle-with-baseline;
以下是一个测试，您可以使用基于 Webkit 的浏览器（例如 Chrome）和 Gecko (Firefox) 进行尝试：
div {
width: 15%;
height: 100px;
display: inline-block;
box-sizing: border-box;
}
hr {
width: 100%;
position: absolute;
top: 90px;
height: 1px;
background: hotpink;
border: none;
}
.container {
border: 2px solid hotpink;
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 100%;
z-index: -1;
}
.reference {
background: darkblue;
}
.standard {
background: teal;
vertical-align: middle;
}
.moz {
background: antiquewhite;
vertical-align: -moz-middle-with-baseline;
}
.webkit {
background: darksalmon;
vertical-align: -webkit-baseline-middle
}<div class="container">
<hr />
<div class="reference"></div>
<div class="standard"></div>
<div class="moz"></div>
<div class="webkit"></div>
</div>参考资料：
希望对我有所帮助:)
【讨论】：
vertical-align: sub 将是适合 W3C 的替代方案。
vertical-align: sub 在 Firefox 中对我的作用不一样。