Различия в текстовом поле и div в Firefox

Я сделал скрипку здесь. http://jsfiddle.net/pmVeR/Различия в текстовом поле и div в Firefox

textarea и div визуализировать идентичность как в Safari, так и в Chrome. Но в Firefox есть дополнение 2px отступ справа от textarea, что влияет на перенос слов.

Что также таинственное, что без 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>

EDIT

В примере я Приведенный выше фиксирована ширина, так что вы были бы в состоянии увидеть проблему, но Мне нужно, чтобы он работал для расширения ширины тоже это. http://jsfiddle.net/pmVeR/6/

источник

2013-05-13 Berry Blue

Работает отлично для меня - оба Chrome (26.0.1410.64) и Firefox (20.0.1) показывают оба элемента как одну и ту же ширину с переносом текста на одни и те же символы. –

такой же для меня. Возможным решением может быть добавление дополнений. 'Обивка: 4px;' например. – lukeocom

@lukeocom. Если вы играете с шириной 'width', вы сможете обнаружить проблему, я могу ее увидеть, установив« width: 275px; »в FireFox. –

Я могу воспроизвести описанное поведение на Firefox 20.0.1 с использованием этого jsFiddle.

Я имел немного взгляда вокруг вас, кажется, что 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. В моем примере я изменил padding на 4px, поэтому -moz-padding-end - 6px. Также в вашей скрипке вы удалили «белое пространство: предварительное обертывание»; но это должно остаться. –

Я обновил ответ, было еще несколько дополнений. Я не думаю, что «white-space: pre-wrap;» имеет значение для поведения, но я все равно добавил его. –

вы можете использовать reset css для этого тоже.

источник

2013-05-13 09:16:05 dsfg

Различия в текстовом поле и div в Firefox

ответ

Смежные вопросы