如何在不影响插入符号高度的情况下使用 line-height？答案

【问题标题】：How can I use line-height without affecting caret height?如何在不影响插入符号高度的情况下使用 line-height？
【发布时间】：2016-01-19 01:20:30
【问题描述】：

在内容可编辑的 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 中解决这个问题？

【问题讨论】：

标签： css html

【解决方案1】：

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

【讨论】：

嗨@Rounin 你对这个插入符号问题有什么建议吗：stackoverflow.com/questions/34866992/…

【解决方案2】：

尝试使用padding 代替line-height 并将display 更改为inline-block：

<span style="padding: 10px 0; display: inline-block;">padding</span>

【讨论】：

行框的高度由它所包含的行内级框的高度决定。对于像span 这样的内联框，这是它们的line-height，而padding 将被忽略。见Line height calculations
@Oriol 谢谢，我添加了display: inline-block;。
如果每一行都可以包含在一个内联块（或块）中，那将起作用。但这会很困难，特别是考虑到它是可编辑的。
嗨@Oriol 你对这个插入符号问题有什么建议吗：stackoverflow.com/questions/34866992/…