我在我的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来演示：
如何使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;
}
