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

Question

当使用浏览器web检查器时,我遇到了CSS属性的两个不同的非标准属性vertical-align.

-webkit-baseline-middle仅适用于Chrome,但-moz-middle-with-baseline可在Firefox上使用.命名类似但不一样.

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

我的问题:

• 它们是任何标准的一部分吗？
• 使用它们时的预期行为是什么？

Answer 1

@ VSG24:
它们是否符合任何标准？

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

将框的垂直中点与父框的基线加上父框的x高度的一半对齐.
CSS 2.1规范,p170

@ VSG24:
使用它们时的预期行为是什么？

在网上进行了一些搜索后,这是我-webkit-baseline-middle在Safari CSS参考资料中发现的内容:

vertical-align: -webkit-baseline-middle:
元素的中心与文本的基线对齐.

我无法获得除此之外的任何信息-moz-middle-with-baseline:

问:Webkit-baseline-middle - 还有其他选择吗？

答:同样的,仅适用于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参考
• 层叠样式表2级修订版1(CSS 2.1)规范

希望我帮了一下:)