2

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

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

同样神秘的是，如果没有white-space: pre-wrap;这个额外的填充，似乎会根据元素的宽度而有所不同。

我可以通过检测 FireFox 并添加padding-right:2px到 my来解决此问题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/

4

2 回答 2

0

您也可以为此使用重置 css。

于 2013-05-13T09:16:05.907 回答
0

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

我已经为你看了一点，似乎 Firefox 过去在填充与 textareas 的结合方面存在相当多的问题，所以我认为你可能无法摆脱它。

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

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

于 2013-05-13T13:34:22.700 回答