html - Firefox和Chrome中的Textarea填充不一致

我在textarea元素上有一个填充，当您在textarea中滚动时，我希望内容保持填充。它可以在Firefox中正常运行，但不能在Chrome中运行。下图显示了输出的差异:

CSS:

textarea {
    width: 250px;
    height: 160px;
    padding: 15px;
    font-family: Arial;
    font-size: 12px;
    line-height: 18px;
    border: 1px solid #CCCCCC;
    overflow: auto;
    resize: none;
}

在Chrome中，顶部和底部填充仅出现在文本内容的开头和结尾。这是一个jsfiddle来演示:

http://jsfiddle.net/LkE6f/

如何使Chrome中的填充与Firefox中的填充/显示相同？

最佳答案

您可以执行类似的操作，它不是很灵活(固定宽度)，但是可以扩展它。它可以解决Chrome中的问题，并且不会破坏Firefox。它对#container和which work in IE8+使用伪元素

textarea {
    width: 250px;
    height: 160px;
    padding: 15px;
    font-family: Arial;
    font-size: 12px;
    line-height: 18px;
    border: 1px solid #CCCCCC;
    overflow: auto;
    resize: none;
    display: block;
}
#container:before, #container:after {
    display: block;
    height: 15px;
    background-color: #FFF;
    position: absolute;
    left: 1px;
    width: 225px;
    content:'';
}
#container:before {
    top: 1px;
}
#container:after {
    bottom: 6px;
}

这是jsFiddle。

更新:向display: block中添加了textarea以解决IE定位问题。

更新2:另一种解决方案是从#container div中获取其宽度，并且您需要根据浏览器滚动条的宽度设置right值，目前在Chrome中17px值还可以。使用此解决方案的一个优点是，您可以通过更改textarea的宽度来将#container的宽度设置为任意值，伪元素将相应地缩放。 jsFiddle。

#container {
    width: 260px;
    margin: 20px auto;
    position: relative;
}
textarea {
    width: 100%;
    height: 160px;
    padding: 15px;
    font-family: Arial;
    font-size: 12px;
    line-height: 18px;
    border: 1px solid #CCCCCC;
    overflow: auto;
    resize: none;
    display: block;
}
#container:before, #container:after {
    display: block;
    height: 15px;
    background-color: #FFF;
    position: absolute;
    left: 1px;
    right: 17px;
    content:'';
}
#container:before {
    top: 1px;
}
#container:after {
    bottom: 1px;
}

关于html - Firefox和Chrome中的Textarea填充不一致，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24923424/