Firefox中的Textarea和div填充区别

问题描述：

我在这里做了一个小提琴。 http://jsfiddle.net/pmVeR/Firefox中的Textarea和div填充区别

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

还有什么神秘的是，没有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/

适合我的作品 - Chrome（26.0.1410.64）和Firefox（20.0.1）均将相同宽度的元素显示为相同的文字，并且文字环绕在相同的字符处。 – 2013-05-13 02:53:09

同样适合我。可能的解决方法可能是专门添加填充。 “填充：4像素;”例如。 – lukeocom 2013-05-13 08:06:38

@lukeocom - 如果你玩弄'width'，你应该能够显示问题，我可以通过在FireFox中设置width：275px来看到它。 – 2013-05-13 08:19:42

答

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

我已经有一段时间了，看起来Firefox在过去有相当some issues与paddings combination with textareas，所以我想你可能无法摆脱它。

我不确定您是否会将供应商特定的前缀作为浏览器黑客入侵，但我有一个给你。

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

谢谢！这是我正在寻找的前缀，但您只想将其应用于div。 http://jsfiddle.net/pmVeR/7/另外，无论填充是为div/textarea，你需要添加2px到-moz-padding-end。在我的例子中，我将填充改为4px，所以-moz-padding-end是6px。同样在你的小提琴中，你删除了“白色空间：预先包装;”但是这需要留下。 – 2013-05-13 18:08:13

我已经更新了答案，还有一些填充正在进行。我不认为'空白：预先包装'对行为有不同的影响，但我已经重新添加了它。 – 2013-05-15 22:36:55

答

你也可以使用reset css。

Firefox中的Textarea和div填充区别

相关推荐