行高不影响可满足的第一行

Question

考虑以下HTML：

<div class="content" contenteditable="true">
rrr<br>
ttt
</div>

& CSS：

.content {
line-height: 35px;
}

你得到的是线的高度，只影响第二线和以下。困扰我的是，插入符号的高度受直线高度的影响，因此，在第一行中，插入符号的高度显着地短于第二行。

使用此小提琴查看它的运行情况。将插入符号放置在第一行和第二行，并观察每一行中的插入符号。注意，由于线高，它的高度是不同的。

I不能为主内容可编辑元素.中的每一行提供内部包装。

当尝试在css规则中使用div::first-line并使用line-height时，它不会影响它，尽管其他属性(如background-color )会影响它。

是否也有可能影响第一行？我更喜欢只使用css的解决方案，但是如果没有选择，Js也会这样做。

Answer 1

尽管在另一个答案中提到了这一点，但<br>并不是一个真正的问题。真正的问题是Chrome --特别是它是如何在网上处理文本的--它的高度大于它自己的高度。这个Chrome线高问题实际上是我们许多做CSS的人长期烦躁的原因。插入符号总是跨越整个直线高度，而文本并不是直线高度的垂直中间.更糟糕的是，他们对待第一行与其他行不同：

关于<br>的建议是一个掩盖问题的黑客，但只有当您要手动输入文本区域中的分行符时，它才有效。只是为了演示br哈克方法不适用于具有自然发生的包装文本的常规文本区域/可内容区域：http://jsfiddle.net/8ao367gz/1/

坏消息：到目前为止还没有真正的解决方案。普遍的共识是找到一种绕过您的设计的方法，不要将line-height设置为normal或1以外的任何东西。如果您必须在设计中使用线条高度，那么要么在Chrome上使用奇怪的底部对齐插入符，要么告诉用户使用另一个没有这个问题的浏览器(比如Firefox)。或者我们都可以不断地抱怨并向Chrome提交错误报告，并祈祷他们“修复”这个问题。我对此表示高度怀疑，因为我不认为这是一个bug；即使他们认为是，也可能是一个非常低优先级的错误。

Answer 2

演练(如下面的注释所述，这不会破坏预期的行为)：

br {
  content: " ";
  visibility: hidden;
  display: block;
}