Question

textarea和div在Safari和Chrome中呈现相同的效果。但是在Firefox中，2px右侧有一个额外的textarea填充，这会影响自动换行。

如果没有white-space: pre-wrap;这个额外的填充似乎会根据元素的宽度而变化，这也很神秘。

我可以通过检测FireFox并将padding-right:2px添加到我的div来解决此问题，但我想知道是否可以在没有浏览器黑客的情况下修复此问题？

CSS

div, textarea {
    font-family: Courier;
    font-size: 14px;
    margin: 0;
    padding: 0;
    outline: 0;
    resize: none;
    border: 1px solid black;
    width: 282px;
    height: 80px;
    white-space: pre-wrap;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

HTML

<textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</textarea>
<div contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</div>

修改

我上面提供的示例是固定宽度，因此您可以看到问题，但我需要它来扩展宽度，就像这样。 http://jsfiddle.net/pmVeR/6/

Answer 1

你也可以使用reset css。

Answer 2

我可以使用 jsFiddle 在Firefox 20.0.1上重现所描述的行为。

我已经对你进行了一些调查，过去似乎Firefox在some issues中与paddings进行了很长的combination with textareas，所以我在思考你可能无法摆脱它。

我不确定您是否会将供应商特定的前缀列为浏览器黑客，但我已经为您准备了一个。

您可以将-moz-padding-start: 2px;和-moz-padding-end: 2px;添加到您的CSS规则中，这将解决您的包装问题： jsFiddle 。

Firefox中的Textarea和div填充差异

2 个答案: