在其他文本之上渲染文本

Question

我有一个带有一些文本的元素。在上面我有另一个元素，文本完全相同。我希望顶部元素中的文本呈现在其他文本的顶部。但是，当我运行它时，无论底部元素是否显示，都会得到明显不同的结果。

https://jsfiddle.net/ag5nobc9/

对于黑色文本来说这不是太糟糕，但如果顶部元素的文本是红色或以其他方式设置样式，则开始看起来很糟糕。

如果设置不透明度：0，则问题消失，但是底部元素的插入符号和文本选择不再由浏览器呈现，这会妨碍可用性。我尝试在底部元素上设置font-weight，但它似乎并没有以任何方式实际更改文本。

.fixFontAttributes {
  font-size: 12px;
  font-family: "Monaco","Menlo","Ubuntu Mono","Droid Sans Mono","Consolas",monospace;
  color: red;
}

<h3>With textarea</h3>
<div style="position:relative">
  <textarea class="fixFontAttributes" style="z-index:0;background-color:transparent;border:0px none;margin:0px;padding:0px">some text</textarea>
  <div class="fixFontAttributes" style="position:absolute;top:0px;left:0px;z-index:1;pointer-events:none;padding:0px;border:0px none;margin:0px">
    <pre class="fixFontAttributes" style="margin:0px;padding:0px;border:0px none;">some text</pre>
  </div>
</div>

<h3>Without textarea</h3>
<div style="position:relative">
  <div class="fixFontAttributes" style="position:absolute;top:0px;left:0px;z-index:1;pointer-events:none;padding:0px;border:0px none;margin:0px">
    <pre class="fixFontAttributes" style="margin:0px;padding:0px;border:0px none;">some text</pre>
  </div>
</div>

理想情况下，我想要一个跨浏览器解决方案，或者至少要了解问题所在 - Chrome在这方面产生与Firefox完全相同的问题。

为了完全清楚，我想要的是文本显得正常 - 也就是说，好像textarea不存在。它应该清晰明朗，不要轻微模糊。

我观察到如果你只是将div渲染两次，问题就会减少。似乎浏览器不会使用100％不透明度渲染div的文本，即使您设置了opacity: 1，或者它使用子像素差异或其他内容呈现它。它仍然......更浓，不知何故，但颜色更好。

编辑：无论使用哪种元素，实际上似乎都会发生，例如：一对跨度表现出与pre和textarea完全相同的行为。

Answer 1

这是一种不同的方法，但您考虑使用

contentEditable="true"

示例：

<div contentEditable="true">
The text in this div can be edited.
</div>