css - 如何在不影响插入符高度的情况下使用行高？

Question

在一个 contenteditable div 中，当我有多行时，我使用 line-height 添加一些行空间。这是显示问题的示例 div:

<div style="padding: 50px; width: 90px; line-height: 2em;" contenteditable="true">
  line height line height line height
  <span style="line-height: 1em; color: Red;">line height</span>
  <span style="line-height: 10px; color: Orange;">line height</span>
  <span style="line-height: normal; color: Green;">line height</span>
  <span style="line-height: .5em; font-size: .5em; height: 5px; color: Blue;">line height</span>
</div>

在 Chrome 中，当您将插入符号移动到第二行时，插入符号的高度会变大。我在 div 中添加了一些具有不同行高的跨度，但这根本不会影响插入符号的高度。

在 Safari 中我看到了同样的问题。在 Firefox 中，它按预期工作，即插入符高度与字体大小匹配，而不是行高。

有什么方法可以解决 Chrome 和 Safari 中的这个问题？

Answer 1

A <span>是用于措辞内容的通用内联容器，并且(因此)没有高度。

如果你声明所有<spans>因为有 display:inline-block插入符将相应地调整大小:

div {
padding: 50px;
width: 90px;
line-height: 2em;
}

div span {
display:inline-block;
}

div span:nth-of-type(1) {
line-height: 1em;
color: Red;
}

div span:nth-of-type(2) {
line-height: 10px;
color: Orange;	
}

div span:nth-of-type(3) {
line-height: normal;
color: Green;	
}

div span:nth-of-type(4) {
line-height: .5em;
font-size: .5em;
height: 5px;
color: Blue;
}

<div contenteditable="true">
  line height line height line height
  <span>line height</span>
  <span>line height</span>
  <span>line height</span>
  <span>line height</span>
</div>