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

在 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 中解决这个问题？

最佳答案

<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>

关于css - 如何在不影响插入符号高度的情况下使用行高？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34866992/