相关疑难解决方法(0)

首先,让我们看一段代码:

div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { line-height:1.7;  }

<div><span>123<br>456<br>789<br>000</span></div>

为什么是span的line-height未使用的？

将line-height仍然是200px,但是当我们设置span的display属性inline-block时,line-height的span使用？

见下文:

div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { display:inline-block; line-height:1.7; }

<div><span>123<br>456<br>789<br>000</span>

我有这个代码：

<p style="line-height: 1;overflow: hidden;">blah_blah</p>
<p>blah_blah</p>

<p style="line-height: 1;overflow: hidden;">qypj;,</p>
<p>qypj;,</p>

这导致（注意没有下划线和剪切字符）：

也就是说，它在 Firefox（Windows 10 上的 66.0.3）中的行为方式。其他浏览器似乎呈现下划线。上面的代码片段运行器似乎也可以工作（即使在 Firefox 中），除非您在“完整页面”中运行它。

这个Q类似于添加unicode字符后文本更改高度，只是这里没有技巧。“_”只是一个简单的 ASCII 字符。

我的问题是哪种行为是正确的。是否允许特定字符更改行高（我认为它只应该与字体相关）？不应该line-height: 1暗示它可以完全适合任何文本吗？

我想有些字符是特殊的，例如在其线下方绘制的“p”、“g”、“j”（可能还有“_”）。仍然哪种行为是正确的。是否认为溢出？

PS：此外，我觉得很有趣要么 overflow-x: hidden;overflow-y: visible;和overflow-x: visible;overflow-y: hidden;还是引起了这一点。这对我来说更像是一个实际的错误。

CSS2.1第10.6.1节规定：

内容区域的高度应基于字体，但是此规范未指定。UA可以例如使用em-box或字体的最大升序和降序。

内联不可替换框的垂直填充，边框和边距从内容区域的顶部和底部开始，与“ line-height”无关。

然后，在10.8行高计算中遵循似乎矛盾的语句：

线框的高度确定如下：

1. 计算行框中每个行内框的高度。对于嵌入式盒，这是它们的“行高” ...。

和：

用户代理必须通过其相关基准使未替换的嵌入式框中的字形彼此对齐。

内联框的高度将所有字形及其两边的前导部分包围起来，因此正好是“行高”

在这里，我有些不完全了解。

内联级别框的高度等于line-height它们上设置的属性（最小是line-height在父块容器元素上设置的属性），还是仅由字体高度（和UA实现）确定？

编辑

只是为了避免造成混淆（因为有很多与此相关的帖子）：

• 我知道一个inline-level element的内容高度等于它包含的字体（以及UA实现）
• 我意识到规范确实指出10.6.1，但10.8.1其中指出的高度inline-level box等于的高度line-height
• 这似乎与我矛盾
• 我在这篇文章中的目的是讨论规范中的措辞，以便充分理解其含义以及它与现实的联系

编辑：

为了避免“基于意见”的接近投票，我更改了标题。我认为规范不矛盾，我也不是在征求其他人关于它是否矛盾的观点。

我意识到它实际上并不矛盾，我只是试图理解它的含义（鉴于其措辞）。

我不明白什么时候vertical-align会起作用，什么时候不会起作用。

每次我遇到一个用例时，vertical-align它是否真正有效似乎都是一个抛硬币的问题。我知道它必须应用于内联元素。我读到我必须line-height为通常没有的元素指定一个。我读到该height属性必须具有静态（非自动/非％）值。我读到，vertical-align如果某些（现代）浏览器所使用的元素不是自然的内联元素，则它们无法正确处理。我不清楚是否vertical-align应该位于包含元素（例如text-align）或我想要垂直对齐的元素上。

我创建了这个 jsfiddle来尝试解决问题，但仍然感到困惑。

#outer {
  box-sizing: border-box;
  border: red 1px solid;
  height: 200px;
  width: 400px;
  text-align: center;
}

#inner {
  border: blue 1px solid;
  display: inline-block;
  height: 200px;
  vertical-align: middle;
}
    
#header {
  border: green 1px solid;
  display: inline-block;
  line-height: 1em;
  margin: 0;
}

<div id="outer">
  <div id="inner">
    <h1 id="header">
      Some Text
    </h1>
  </div>
</div>

在上面的 jsfiddle 中，我希望#header位于 和 顶部和底部之间的中间#outer …

我创建了小片段来说明问题。

我svg在<i>标签内有一个图标。这是我的图标的基本块，放置在我整个页面的各个位置。为了这个例子，我把它放在一个简单的 div 容器中。

如果您检查下面示例的结果，您会发现<i>标签的高度与预期33px不符30px。我的问题是为什么会发生这种情况以及如何预防？

.container {
  font-size: 30px;
}

.icon {
  line-height: 1;
}

.icon svg {
  height: 1em;
  width: 1em;
}

<div class="container">
  <i class="icon">
    <svg width="24" height="24" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /></svg>
  </i>
</div>