Question

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

ObservableCollection

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

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

有没有办法在Chrome和Safari中解决这个问题？

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

Answer 2

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

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

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

2 个答案: