Question

我的textarea元素上有一个填充，我希望在textarea中滚动时内容保持填充状态。它在Firefox中按预期工作，但在Chrome中没有。下图显示了输出的差异：

enter image description here

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，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;
}

Answer 2

最佳答案：

拥抱浏览器之间的差异;网络不统一，您的设计在浏览器中永远不会100％相同。

解决答案：

如果您不关心顶部和底部有间隙的滚动条，您可以use borders and an outline like this。

或

如果您乐意将textarea中的每个div包裹起来，可以使用伪元素实现。应该在IE8 +，FF和Chrome上正确显示。

Have a fiddle!

HTML

<div class="textareaWrap"> <textarea>Content</textarea> </div>

CSS

textarea { position: relative; width: 250px; height: 160px; font-family: Arial; padding: 15px; font-size: 12px; line-height: 18px; border: 1px solid #CCCCCC; resize: none; } .textareaWrap { position: relative; } .textareaWrap:after { position: absolute; content:''; display: block; width: 232px; height: 15px; background: #FFF; z-index: 1; bottom: 5px; left: 1px; } .textareaWrap:before { position: absolute; content:''; display: block; width: 232px; height: 15px; background: #FFF; z-index: 1; top:1px; left: 1px; }

Answer 3

尝试使用textarea的以下解决方案

textarea {
   -moz-appearance: textfield;
   -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
   -moz-user-select: text;
   background-color: -moz-field;
   border: 2px inset threedface;
   color: -moz-fieldtext;
   cursor: text;
   font: -moz-field;
   width:250px;
   height:150px;
   letter-spacing: normal;
   line-height: normal !important;
   padding: 1px 0;
   text-align: start;
   text-indent: 0;
   text-rendering: optimizelegibility;
   text-shadow: none;
   text-transform: none;
   word-spacing: normal;
 }

小提琴链接Link

此致马哈德

Answer 4

使用百分比而不是像素。在您的情况下，它将是padding:1%;。

Firefox和Chrome中的Textarea填充不一致

4 个答案: