Firefox 和 Chrome 中的 Textarea 填充不一致答案

【问题标题】：Textarea padding inconsistency in Firefox and ChromeFirefox 和 Chrome 中的 Textarea 填充不一致
【发布时间】：2014-09-15 09:37:50
【问题描述】：

我的 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/

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

【问题讨论】：

在 Chrome 36 上对我来说同样有效
检查这个 jsbin，如果它给你任何见解，请告诉我们：gist.github.com/gtramontina/3935597 jsbin.com/emowom/3
有趣的发现。就个人而言，Chrome 的方式似乎更直观合理。
我也有。但问题是什么？这就是 Chrome 的行为方式，我认为没有解决方法。当您拥有 overflow: 和 padding 时，它不仅适用于 textarea，还适用于其他元素。
能否修改html找到解决办法？

标签： html css

【解决方案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;
}

【讨论】：

@misterManSam - 我没有看到问题，我知道浏览器滚动条的宽度不统一，所以我没有尝试让宽度正确，我只是留下了额外的空间15px 左右两边的边距..
@misterManSam - 啊，我明白了，当没有滚动条时，可以通过在右侧添加一些额外的填充来修复。
谢谢@MathijsFlietstra，我会尽快测试一下，让你知道它是否适合我:)

【解决方案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;
}

【讨论】：

改变了宽度。这可能需要更多地摆弄，因为 IE、FF 和 Chrome 的渲染都略有不同，这里和那里都有 1px。

【解决方案3】：

尝试以下文本区域的解决方案

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

问候马哈迪文

【讨论】：