html - 如何将文本从 textarea 完美地叠加到具有相同文本的 div 上？

Question

我希望将相同的文本相互重叠，以获得语法高亮方面的一个有趣想法。

我正在尝试在前台使用 textarea，在后台使用 div。设置元素位置相同，字体大小相同后，仍然没有完美重叠。我到底错过了什么？

Fiddle

div,textarea{
position:absolute;
top:0;
left:0;
background:transparent;
font-size:1em;
line-height:1em;
}

Answer 1

为两者设置相同的font-family

textarea 有 1px 边框，所以你可以添加 border:1px solid transparent 到有文本的 div使其对齐

* {
  margin: 0;
  padding: 0;
}
div{
    border:1px solid transparent
}
div,
textarea {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  font-size: 1em;
  line-height: 1em;
  font-family: arial;
}

<div>Hello, world!</div>
<textarea>Hello, world!</textarea>