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/

來源

2013-05-13 Berry Blue

適合我的作品 - 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。

來源

2013-05-13 13:34:22

謝謝！這是我正在尋找的前綴，但您只想將其應用於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。

來源

2013-05-13 09:16:05 dsfg

Firefox中的Textarea和div填充區別

回答

相關問題