在Chrome中以大行高将插入符放置在可编辑的内容中

在Firefox中，如果单击灰色区域（标记

元素），则插入标记将始终位于最近的字符处。如果在线条之间单击，则插入符也将合理定位。

在Chrome中，仅当您在蓝色区域内单击（标记元素）时，插入符号才会定位在最近的字符处。在灰色区域中，插入符结束于下一行的开始，或者如果您单击最后一个跨度的下面，则结束于最后一行的末尾。

如何使用Chrome复制Firefox行为？

注意：display: inline-block按此处的建议给跨度a 不能解决问题。

如您所知，它与Chrome以及它如何处理行高有关。

虽然，我写了一种变通办法，似乎可以在Linux（Chrome，Firefox）和Windows（Chrome，Firefox，Edge）上正常工作。

使用vertical-align: text-bottom，除第一行外，所有行似乎都按预期工作。因此，我们的想法是添加一个换行符（然后使用否定它font-size: 0）

p::before {
  content: "\A";
  white-space: pre;
  display: inline;
}

p::first-line {
  font-size: 0px;
}

这在Chrome（Linux和Windows）上都可以很好地工作，但是在Firefox上，我没有设法消除多余的换行符。因此，由于最初它工作得很好，所以我使用了仅适用于Firefox的规则来隐藏多余的换行符。

因此，我们有我们的Chrome和Firefox（Windows和Linux）的解决方法的工作，但边缘有一些困难vertical-align所以（再一次），我用了一个MS只裁定unset了vertical-align。

结果（在Chrome Windows / Linux，Firefox Windows / Linux，Edge Windows上运行）

p::before {
  content: "\A";
  white-space: pre;
  display: inline;
}

p::first-line {
  font-size: 0px;
}

p {
  display: inline-block;
  margin: 0;
  background: lightgrey;
  
}
span {
  line-height: 2.5;
  font-size: 30px;
  background: lightblue;
  vertical-align: text-bottom;
}

p::before {
  content: "\A";
  white-space: pre;
  display: inline;
}

p::first-line {
  font-size: 0px;
}

/*  Firefox only */
@-moz-document url-prefix() {
  p::before {
    display: none;
  }
}

/* Edge only */
@supports (-ms-ime-align:auto) {
  span {
    vertical-align: unset;
  }
}