html – Firefox和Chrome中的Textarea padding不一致

我在我的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,您需要根据浏览器的滚动条的宽度设置正确的值,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;
}

原文地址：https://www.jb51.cc/html/230402.html