Firefox和Chrome中的Textarea填充不一致

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中,顶部和底部填充仅出现在文本内容的开头和结尾.这是一个jsfiddle来演示:

http://jsfiddle.net/LkE6f/

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

Answer 1

你可以做这样的事情,它不是很灵活(固定宽度),但你可以扩展它.它解决了Chrome中的问题并且不会破坏Firefox.它使用伪元素#container,在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:替代解决方案,它从#containerdiv 获取其宽度,并且您需要right根据浏览器滚动条的宽度设置值,此时17pxChrome中的值是正常的.这个解决方案的专业人员是你可以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;
}