Html Firefox中文本区域和div填充的差异

我在这里拉了把小提琴

textarea

和

div

在Safari和Chrome中呈现相同。但是在Firefox中，

textarea

右侧有一个额外的

2px

填充，这会影响单词的包装

同样神秘的是，没有

空白：预包装

这个额外的填充似乎随元素的宽度而变化

我可以通过检测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>

Lorem ipsum door sit amet，一位杰出的领导者，他是一位临时的工程师。。。
这是一个很好的例子，它是一个很好的例子。。。

编辑

我上面提供的示例是固定宽度，所以您可以看到问题，但我需要它来扩展宽度，就像这样。

---

您也可以使用重置css进行重置。

我可以使用此选项在

Firefox 20.0.1

上重现所描述的行为

我已经为你看了一看，Firefox在过去似乎已经有了相当的发展，所以我想你可能无法摆脱它

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

---

您可以将和添加到CSS规则中，这将解决包装问题：.

对我来说效果很好-Chrome（26.0.1410.64）和Firefox（20.0.1）都将两个元素显示为相同的宽度，并将文本包装为相同的字符。对我来说也是一样。一个可能的解决办法可能是专门添加填充填充：4px；'例如。@lukeocom-如果您使用

width

可以显示问题，我可以通过设置

width:275px也适用于FF 18，您使用的是哪个版本的FireFox？谢谢！这是我一直在寻找的前缀，但您只想将其应用于div。此外，无论div/textarea的填充是什么，您都需要将2px添加到-moz padding end。在我的示例中，我将填充改为4px，所以-moz填充结束是6px。同样在你的小提琴中，你删除了“空白：预包装”，但这需要保留。我已经更新了答案，还有一些填充正在进行。我不认为空白：预包装对行为有影响，但我还是再次添加了它。