html - 为什么将带有 `inline-block`的 `overflow:hidden`元素的基线设置为其底边距？

在阅读了两个解释inline-block元素的行为(Why is this inline-block element pushed downward?和why the span's line-height is useless)的好答案之后，我仍然有两个无法解释的问题。

1. 是什么原因将inline-block元素的基线从其线框的基线更改为下边缘边缘？

http://www.w3.org/TR/CSS2/visudet.html#leading



2. 如何计算此偏移？



重要提示:我没有尝试找到一种解决方案。我试图了解应用inline-block时更改overflow: hidden元素的定位行为的原因是什么。因此，请不要发布假人的答案。

更新

不幸的是，尽管我接受了答案，却没有得到想要的东西。我认为问题出在问题本身。关于，第一个问题:我想了解为什么inline-block即使保留overflow:hidden也不能保留其线框的基线(尽管W3C规范了)。我想听听设计决策-不仅仅是必须将其设置为某种东西，因为它强制执行W3C。 第二个:我想要一个公式，可以在其中粘贴元素的font-size和line-height并获得正确的结果。

无论如何感谢任何人:)

更新2

幸运的是，主观上找到了答案!请参阅第一个重新接受的答案。谢谢@pallxk!)

最佳答案

1.将内联块元素的基线从其线框的基线更改为下边距边缘的原因是什么？

当“内联块”的overflow属性设置为hidden(完整规范here)时，“内联块”的基线将更改为其底部边缘。

至于做出此决定的原因，我认为由于隐藏了溢出的部分，因此用户代理(浏览器)可以选择渲染该溢出的部分而不显示它，或者选择根本不渲染它。而当未渲染溢出部分时，用户代理无法告知其最后一个线框的基线，因为未渲染它的去向是未知的。

如果将overflow设置为hidden的'inline-block'的基线仍保留为其最后一个行框的基线，则用户代理将被强制呈现给用户隐藏的内容，这可能会妨碍的性能，或者至少， 对用户代理设置了额外的限制。更重要的是，在这种情况下，同一行框中的其他行内文本将与这样的基线对齐，即隐藏了隐藏隐藏的行内框周围的文本，这是的一种形式，而不是直观的。

我做了一个简单的演示，模拟隐藏了溢出的嵌入式块的基线仍设置为其最后一个行框的基线。

var isOverflowHidden = false;
document.querySelector('button').onclick = function() {
  document.getElementById('inline-box').style.overflow = isOverflowHidden ? '' : 'hidden';
  isOverflowHidden = !isOverflowHidden;
}

html { background: white; }
#inline-box { display: inline-block; height: 18px; }
.overflown { color: white; }

<p><button id="toggle">Toggle 'overflow: hidden;' on 'inline-block'</button></p>

<span>
  texts sit
  <span id="inline-box">
    texts in inline-block <br>
    <span class="overflown">
      line 2 <br>
      line 3
    </span>
  </span>
  on baseline
</span>

此外，您还可以将此行为与display: none进行比较。设置后，clientWidth和clientHeight都等于0。

2.如何计算此偏移？

由于您在问题中输入的link中记录了该部分，因此这一部分要容易得多。

我将从“线高”的定义开始。



也就是说，线高由上至下由上半部领先+高度(上升)+深度(下降)+下半部领先组成。

可以针对给定字体和给定大小计算每个组件的高度。

基本上，每种字体都有字体指标，这些指标指定基线以上的特征高度和基线以下的深度。

以“Times New Roman”为例，使用FontForge，我们看到它的Em Size为2048，HHead Ascent为1825和HHead Descent为-443。也就是说，字体大小的1825 / 2048 = 89.1%有助于上升，而443 / 2048 = 21.6%有助于下降。



还有一些以“Typo”开头的度量标准，如果选中了“Really use Typometrics”，那么将使用该类别，并且该规范建议这样做:



线高减去上升和下降就是所谓的领先。



假设font-family: Times New Roman; font-size: 100px; line-height: 200px;，我们得到

ascent = 100px * (1825 / 2048) = 89px
descent = 100px * (443 / 2048) = 22px
top half-leading = bottom half-leading = (200px - 89px - 22px) / 2 = 44.5px

因此，我们看到这可以计算出来。这也可以在页面上进行衡量。

这是另一个演示供您摆弄。

如果您要求转换下半导，则在代码段中将其显示为绿线和蓝线之间的空格。
如果您要求下降和下半部引线偏移，则在代码段中将其显示为红线和蓝线之间的空间。

var $ = document.querySelector.bind(document);

var fontFamily = window.getComputedStyle($('#examinee'))['font-family']
  , fontSize = +window.getComputedStyle($('#examinee'))['font-size'].replace('px', '')
  , containerLineHeight = +window.getComputedStyle($('#examinee'))['line-height'].replace('px', '')
  , textLineHeight = $('.target').offsetHeight
  , ascent = $('#examinee .baseline').offsetTop + $('#examinee .baseline').offsetHeight - $('#examinee .text-top').offsetTop
  , descent = $('#examinee .text-bottom').offsetTop - $('#examinee .baseline').offsetTop
  , topHalfLeading = $('#examinee .text-top').offsetTop
  , bottomHalfLeading = $('#examinee').offsetHeight - 2/* borders of the container */ - $('#examinee .text-bottom').offsetTop - $('#examinee .text-bottom').offsetHeight;

$('#font-family').innerText = fontFamily;
$('#font-size').innerText = fontSize + 'px';
$('#container-line-height').innerText = containerLineHeight + 'px';
$('#text-line-height').innerText = textLineHeight + 'px';
$('#ascent').innerText = ascent + 'px';
$('#descent').innerText = descent + 'px';
$('#top-half-leading').innerText = topHalfLeading + 'px';
$('#bottom-half-leading').innerText = bottomHalfLeading + 'px';

div {
  font-size: 20px;
  line-height: 2;
  width: 650px;

  border: 1px dashed gray;
  border-top: 1px solid blue;
  border-bottom: 1px solid blue;
  margin: 1rem 0;
  overflow: hidden;
  white-space: nowrap;
}

span:not([class]) {
  display: inline-block;
  border: 1px dashed gray;
}

.baseline,
.text-bottom,
.text-top {
  display: inline-block;
  width: 200%;
  margin: 0 -100%;
}

.baseline {
  border-bottom: 1px solid red;
  vertical-align: baseline;  /* the default */
}

.text-bottom {
  border-bottom: 1px solid green;
  vertical-align: text-bottom;
}

.text-top {
  border-bottom: 1px solid green;
  vertical-align: text-top;
}

#examinee {
  position: relative;
  font-size: 100px;
  line-height: 200px;
}

<p>
  Demonstrates that "overflow: hidden;" sets baseline of an inline-block element to its bottom margin.
</p>
<div>
  <span class="baseline"></span>
  <span class="text-top"></span>
  <span class="text-bottom"></span>
  &lt;div&gt;
  <span>
    &lt;span style=""&gt;&lt;/span&gt;
  </span>
  &lt;/div&gt;
</div>
<div>
  <span class="baseline"></span>
  <span class="text-top"></span>
  <span class="text-bottom"></span>
  &lt;div&gt;
  <span style="overflow: hidden;">
    &lt;span style="overflow: hidden;"&gt;&lt;/span&gt;
  </span>
  &lt;/div&gt;
</div>

<p>
  Demonstrates the position of baseline, text-top and text-bottom. <br>
  Demonstrates how "line-height" affects box sizing.
</p>

<ul>
  <li>Blue lines: top and bottom borders of line boxes
  <li>Red lines: baseline of texts
  <li>Green lines: text-top or text-bottom of texts
</ul>

<ul>
  <li>Between blue lines: the line-height
  <li>Between red line and green line: ascent or descent
</ul>

<div id="examinee">
  <span class="target">GgJjPpQqYy</span>
  <span class="baseline"></span>
  <span class="text-top"></span>
  <span class="text-bottom"></span>
</div>


Measured metrics:
<ul>
  <li>font-family: <span id="font-family"></span></li>
  <li>font-size: <span id="font-size"></span></li>
  <li>container line-height: <span id="container-line-height"></span></li>
  <li>text line-height: <span id="text-line-height"></span></li>
  <li>ascent: <span id="ascent"></span></li>
  <li>descent: <span id="descent"></span></li>
  <li>top half-leading: <span id="top-half-leading"></span></li>
  <li>bottom half-leading: <span id="bottom-half-leading"></span></li>
</ul>

关于html - 为什么将带有 `inline-block`的 `overflow:hidden`元素的基线设置为其底边距？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32078950/