Textarea和div填充差异在Firefox [英] Textarea and div padding differences in Firefox

问题描述

我在这里做了一个小提琴。 http://jsfiddle.net/pmVeR/

textarea 和 div 在Safari和Chrome中以相同方式呈现。但在Firefox中，在 textarea 的右侧有一个额外的 2px 填充，它会影响换行。 / p>

什么也是神秘的是没有 white-space：pre-wrap; 这个额外的填充似乎有所不同，取决于

我可以通过检测FireFox并添加 padding-right：2px 来修复此问题。 code> 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> 
   

EDIT

我上面提供的例子是固定宽度，所以你可以看到的问题，但我需要它的工作扩展宽度这样。
http://jsfiddle.net/pmVeR/6/

解决方案

我可以使用 Firefox 20.0.1 href =http://jsfiddle.net/pmVeR/4/ =nofollow> jsFiddle 。

我已经为你看了一下，看来Firefox已经有一些问题与 paddings 在过去的与textareas 的组合中，所以我想你可能无法摆脱它。

我不知道你是否会将供应商特定的前缀作为浏览器黑客，我有一个。

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

I made a fiddle here. http://jsfiddle.net/pmVeR/

The textarea and div render identically in both Safari and Chrome. But in Firefox, there is an extra 2px padding on the right of the textarea, which affects the word wrapping.

What's also mysterious is that without white-space: pre-wrap; this extra padding seems to vary depending on the width of the element.

I can fix this by detecting FireFox and adding padding-right:2px to my div, but I would like to know if this can be fixed without a browser hack?

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>

EDIT

The example I provided above is fixed width so you'd be able to see the problem but I need it to work for expanding widths too like this. http://jsfiddle.net/pmVeR/6/

解决方案

I can reproduce the described behaviour on Firefox 20.0.1 using this jsFiddle.

I have had a bit of a look around for you, it seems that Firefox has had quite some issues with paddings in combination with textareas in the past, so I'm thinking you might not be able to get rid of it.

I'm not sure if you would class vendor specific prefixes as a browser hack, but I've got one for you.

You can add -moz-padding-start: 2px; and -moz-padding-end: 2px; to your CSS rule, that will fix your wrapping issue: jsFiddle.

这篇关于Textarea和div填充差异在Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！