html - Firefox 和 Chrome 中的文本区域填充不一致

Question

我的 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 中，top 和 bottom padding 只出现在文本内容的开头和结尾。这是一个用于演示的 jsfiddle:

http://jsfiddle.net/LkE6f/

如何使 Chrome 中的填充以与在 Firefox 中相同的方式显示/呈现？

Answer 1

你可以做这样的事情，它不是很灵活(固定宽度)，但你可以扩展它。它修复了 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 值根据浏览器滚动条的宽度，17px 值目前在 Chrome 中是可以的。此解决方案的优点是您可以通过更改 #container 的宽度将 textarea 的宽度设置为任何值，并且伪元素将相应地缩放。 <知识库> 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;
}