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

Question

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

-webkit-baseline-middle 仅在 Chrome 中可用，而 -moz-middle-with-baseline 在 Firefox 中可用。命名相似但不相同。

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

上列出

我的问题：

它们是否属于任何标准？
当使用它们？

Answer 1

@VSG24:
Are they part of any standards?

根据 W3C CSS 参考，这两个属性都不属于任何标准。正如 CSS 2.1 规范中所预期的那样，它们似乎只被 Webkit 和 Gecko 使用以正确运行：

Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
CSS 2.1 specs, p170

@VSG24:
What is the expected behavior when using them?

在网络上进行一些搜索后，这是我在 Safari CSS Reference 上找到的关于 -webkit-baseline-middle 的内容：

vertical-align: -webkit-baseline-middle:
The center of the element is aligned with the baseline of the text.

除此信息外，我无法获得有关 -moz-middle-with-baseline 的任何信息：

Q: Webkit-baseline-middle - are there alternatives?

A: the same, only for Mozilla
>vertical-align: -moz-middle-with-baseline;

https://toster.ru/q/255210

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

参考资料：

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

-webkit-baseline-middle and -moz-middle-with-baseline

css

vertical-alignment

vendor-prefix