Question

我希望将相同的文本重叠在一起，以获得有关语法高亮的有趣想法。

我正在尝试使用前景中的textarea和后台中的div。设置元素的相同位置以及相同的字体大小后，它们仍然不会完全重叠。我到底错过了什么？

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>

Answer 2

尝试明确设置font-family，padding和border-width：

div,textarea{
    position:absolute;
    top:0;
    left:0;
    background:transparent;
    font-size:1em;
    line-height:1em;
    font-family:sans-serif;
    padding:0;
    border-width:0;
}

两条评论：

浏览器为textarea元素定义默认样式，因此诀窍是找出浏览器设置的属性并明确覆盖这些属性。最好覆盖div和textarea 上的属性。如果您只更改div以适应浏览器的textarea默认样式，那么您将在不同的浏览器中获得不同的结果。例如，在Chrome中，textarea的默认边框宽度为1像素，而在Firefox中，则为2像素。
由于字体抗锯齿的工作方式，您总会得到略微大胆的效果。可能最好将两种字体颜色中的一种设置为白色或透明。

Answer 3

试试这个： -

Link

div,textarea{
    position:absolute;
    top:0;
    left:0;
    background:transparent;
    font-size:1em;
    line-height:1em;
    font-family:arial /*add same font-family */
}

和

 div{
   padding:3px 3px 0
  }

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

3 个答案: