CSS: textarea 行高匹配行号行高？

Question

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

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

您可以看到下面第 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;
}

有什么方法可以更改它们以匹配文本区域的属性？

提前致谢！

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;
}

CSS: textarea 行高匹配行号行高？

CSS: textarea line-height match Line number line-height?

html

css

textarea

line-height