Question

使用浏览器Web检查器时，我遇到了CSS属性vertical-align的两个不同且非标准的属性。

-webkit-baseline-middle仅适用于Chrome，而-moz-middle-with-baseline适用于Firefox。命名类似但不一样。

我在网上找不到关于这两个的任何信息。它们甚至没有列在MDN上。

我的问题：

它们是否符合任何标准？
什么是预期的行为使用它们？

Answer 1

<强> @ 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 - 还有替代方案吗？

A：相同，仅适用于Mozilla
  vertical-align: -moz-middle-with-baseline;

https://toster.ru/q/255210

以下是测试，您可以使用基于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>

参考文献：

Safari和WebKit实现了万维网联盟（W3C）定义的CSS 2.1规范的大部分，以及CSS 3规范的部分内容。此参考介绍了支持的属性并提供了Safari可用性信息。如果此处未列出属性，则Safari和WebKit不会实现该属性 Safari CSS Reference
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

希望我有所帮助：）

-webkit-baseline-middle和-moz-middle-with-baseline

1 个答案: