Почему textarea отличается по ширине от input в браузерах на движке Webkit?

Question

[someden]

Для input и textarea в css задал все одинаковое и падинги и марджины, бордер, шрифты и т.д.
Но все равно textarea cols='30' больше по ширине чем input size='30' в хроме, сафаре и опере. Только в фаерфоксе все ок.
Почему так происходит? Есть ли способ это исправить не прописывая width?

Answer 1

[tennalian]

prntscr.com/5v72of

Comments

[tennalian]

cols - символы size - пиксели, %

[someden]

size это никак не пиксели, это теже символы, иначе в фаервоксе тоже бы размер отличался

[tennalian]

kisonic: простите, не пиксели, но и не символы htmlbook.ru/html/input/size

[someden]

Размеры cols и size задаются в символах и должны быть одинаковыми. Иначе в фаерфоксе бы тоже отличался размер textarea или разница ширины изменялась была в зависимости от значений cols и size. То есть, по вашей логике если задать cols='30' size='30', то разница будет допустим 10px, а если задать cols='90' size='90', то разница должна уже быть 30px.
Но она всегда одинаковая 5px, какой бы cols и size я не задавал, разница всегда 5px.

[tennalian]

kisonic: пока ковырялась, нашла в ФФ баг. rows+1 cols+3

Answer 2

[bromzh]

Потому что у textarea есть внутренние отступы. А по-умолчанию они добавляются к заданному размеру элемента. Добавь для textarea в css свойство box-sizing: border-box;
Вот ещё хорошая ссылка для ознакомления: www.w3schools.com/css/css_boxmodel.asp

Comments

[someden]

Все это я добавил, не помогает.

[bromzh]

kisonic: пропиши width, зачем создавать самому себе такие проблемы?
Как вариант, используй table или display: table, если нужна сетка. Если старые браузеры не нужны, то используй flexbox.
Какие-то странные у тебя проблемы на ровном месте.
И код скинь, а то непонятно, что ты там понаписал.

[Николай Шабалин]

bromzh: codepen.io/aurfon/pen/jEmQBK?editors=110 собственно и всё

[someden]

Николай Шабалин: совершенно верно)

[someden]

bromzh: в моем варианте немного css добавляется codepen.io/anon/pen/WbjYdy

[someden]

Но сути это не меняет, я подозреваю что это проблема вебкитовских браузеров, они добавляют к ширине textarea некую величину, непонятно от чего зависящую.

[Николай Шабалин]

kisonic: У меня этот вариант не работает в Linux, Firefox v.35. Так что я не берусь грушить на webkit

Answer 3

[Николай Шабалин]

Никогда не задумывался на эту тему, но судя по описанию -
htmlbook.ru/html/input/size
htmlbook.ru/html/textarea/cols
одно и тоже.

Меня больше интересовала вот эта строка -
Ширина текстового поля, которое определяется числом символов моноширинного шрифта.

Попробовал у textarea задизайблить monospace шрифт, но толку ноль.

Answer 4

[Lev_Shestov]

На StackOverflow приводится такое решение проблемы:

input, textarea{
font-family: Arial, sans-serif;
font-size: 100%;
width: 26em; /* fallback for the next one, for browsers not recognizing ch */
width: 40ch; /* sets the width to 40 times the width of the digit “0” */
}

Не знаю, насколько это допустимый вариант, но мою проблему решил.

ссылка: stackoverflow.com/questions/18908018/why-do-textar...