Как заставить Firefox отображать отступы textarea так же, как в div?

Question

Я пытаюсь обеспечить одинаковую ширину на строку в пикселях внутри текстовой области в IE8, Firefox и Safari, чтобы текстовое содержимое оборачивало строки как можно более предсказуемо и согласованно.

Firefox делает что-то немного странное: у него есть дополнительный пиксель отступа из пространства содержимого текстовой области по сравнению с двумя другими браузерами и против аналогично оборудованного блока div.

При применении этого класса как к текстовой области, так и к элементу div, разница видна, когда текст в элементе div касается внешнего левого края красного фона, но текст в текстовой области имеет смещение, аналогичное отступу в 1 пиксель, несмотря на заполнение ноль:

.testbox{
    padding:0;
    margin:0;
    border:0;
    background: red;
    width: 40px;
    height: 40px;
    font-size: 12px;
    line-height: 16px;
}

Другие значения для отступа отображают один дополнительный пиксель смещения относительно деления.

Есть какие-нибудь идеи, если есть способ обмануть Firefox для визуализации текстовой области, как если бы она была div, или отрегулировать это свойство не-padding, но выглядит-как-дополнение для текстовой области?

Answer 1

Недавно я занимался исследованием проблемы, описанной OP для , аналогичного вопроса для SO .Похоже, что ошибка в Firefox вызывает рендеринг этого так называемого «не заполнение, а выглядит как заполнение» элементов textarea.

Обычно этот дополнительный отступ на самом деле не является проблемой, но он становится проблемой, когда вы хотите, чтобы два элемента имели одинаковую ширину, и вы заботитесь о том, чтобы его содержимое было одинаковым для обоих элементов.*

Получение textarea для переноса содержимого таким же образом, как, например, div элементов в Firefox

Кажется невозможным избавиться от этой ширины 1.5px в textarea вFirefox, поэтому, если вы хотите убедиться, что перенос содержимого внутри div в Firefox ведет себя точно так же, как перенос содержимого внутри textarea в Firefox, лучшим подходом, кажется, является добавление дополнительного 1.5px заполнениясправа и слева внутри div, но только в Firefox.Вы можете сделать это, установив следующие специфичные для вендора свойства CSS с префиксом на div:

-moz-box-sizing: border-box;
-moz-padding-end: 1.5px; 
-moz-padding-start: 1.5px; 

Первое гарантирует, что набор отступов на div не увеличит ширину divи следующие два гарантируют, что 1.5px отступа будет установлен справа и слева от div.

Этот подход не влияет на рендеринг div вв любых других браузерах это не требуется, поскольку textarea в других браузерах не отображает никаких дополнительных отступов.Но это гарантирует отсутствие различий между div и textarea внутри Firefox при условии, что они имеют одинаковые свойства font-family и font-size и т. Д.

Вот jsFiddle для демонстрационных целей.

Получение textarea для последовательного переноса контента в разных браузерах

Если вытолько для того, чтобы textarea в Firefox имел ту же ширину и режим переноса, что и textarea в других браузерах, вы можете установить box-sizing в border-box, добавить padding с обеих сторон 5.5px и установите -moz-padding-end и -moz-padding-start на 0px.

textarea {
    padding: 0 5.5px 0 5.5px;
    -moz-padding-end: 0px;
    -moz-padding-start: 0px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Вот jsFiddle , показывающий этот подход.

Answer 2

Это ошибка в Firefox, которая была исправлена ​​ несколько дней назад.Исправление будет выпущено с Firefox 29.

Я уже попробовал последнюю ночную сборку, и ошибка textara исчезла!

Answer 3

Ничего себе, я пока не знаю ответа, но я попробовал кое-что, и кажется, что текстовая область, когда вы применяете к ней границы, поля и отступы, не меняет ее ширину, а устанавливает границы и т. Д. . на внутренней. Попробуйте это:

.testbox {
    padding: 10;
    margin: 10;
    border: 5px solid black;
    background: red;
    width: 40px;
    height: 40px;
    font-size: 12px;
    line-height: 16px;
}

Вы можете обойти это, используя что-то вроде этого:

<div class="testbox">
    <textarea class="testarea"></textarea>
</div>

CSS:

.testbox {
    padding: 0;
    margin: 0;
    border: 0;
    background: red;
    width: 40px;
    height: 40px;
    font-size: 12px;
    line-height: 16px;
}

.testarea {
    padding: 0;
    margin: 0 -1px;
    border: 0;
    background: red;
    width: 100%;
    height: 100%;
    font-size: 12px;
    line-height: 16px;
}

Похоже, что это также работает в IE, за исключением -1px, который отбрасывает макет (по одному).

Answer 4

У меня была похожая проблема, тег ссылки с фоновым изображением и отступами не очень хорошо отображался в Firefox Заполнение и фон, казалось, применимы к строке текста, а не к блоку текста, когда многострочный. Я проверил несколько вещей и в итоге использовал «display: block;» на элементе css. Работал на меня.

Answer 5

Я столкнулся с той же проблемой, и, хотя мое решение выглядело как изгибание назад слишком сильно для этого одного пикселя, но это решило проблему, вот что: Объединить ширину из-за этого странного поведения, вместо использования div, я использовал отключенную текстовую область с белым фоном и курсором по умолчанию, чтобы подражать div.