html - CSS：textarea line-height 匹配行号 line-height？

Question

我有这个文本区域，我用这个hack来获取行号：

但是，这很好，我无法让 textarea 的行高、填充等与行号的相同属性相匹配。

您可以在第 6 行之后看到下面的行开始移动。

这是我的 CSS：

textarea {
 background: url(http://i.imgur.com/2cOaJ.png);
 background-attachment: local;
 background-repeat: no-repeat;
 padding-top: .995em;
 border-color:#ccc;
 line-height:1.154em;
}

有什么方法可以改变它们以匹配 textarea 的属性？

先感谢您！

Answer 1

我让这个在 chrome 中正确排列。我不建议使用 12px 作为字体大小，但这就是它的计算结果。

textarea {
  background: url(http://i.imgur.com/2cOaJ.png);
  background-attachment: local;
  background-repeat: no-repeat;
  border-color: #ccc;
  font-family: inherit;
  font-size: 12px;
  padding: .75rem 0 0 1.8rem;
  line-height: 1.4;
  overflow: auto;
  background-color: white;
}