<input name="txtId" type="text" size="20" />
или
<input name="txtId" type="text" style="width: 150px;" />
Какой из них является оптимальным кросс-браузерным кодом?
Конечно, это зависит от требований, но мне любопытно узнать, как люди решают и на каком основании.
Ответы:
Вы можете использовать оба. Стиль css переопределит
size
атрибут в браузерах, которые поддерживают CSS, и сделает поле правильной ширины, а для тех, которые этого не делают, он вернется к указанному количеству символов.Редактировать: я должен был упомянуть, что
size
атрибут не является точным методом определения размера: согласно спецификации HTML , он должен ссылаться на количество символов текущего шрифта, которые ввод сможет отображать сразу.Однако, если указанный шрифт не является шрифтом фиксированной ширины / моноширинного пространства, это не гарантирует, что указанное количество символов будет фактически видимым; в большинстве шрифтов разные символы будут разной ширины. На этот вопрос есть несколько хороших ответов, касающихся этой проблемы.
Фрагмент ниже демонстрирует оба подхода.
источник
Я предлагаю, вероятно, лучший способ установить ширину стиля в единицах em :) Так что для размера ввода 20 символов просто установите
style='width:20em'
:)источник
size
несовместим в разных браузерах и их возможных настройках шрифта.width
Набор стилей в рх, по крайней мере , соответствовать, по модулю вопросов коробкообразных размеров . Возможно, вы также захотите установить стиль в 'em', если хотите изменить его размер относительно шрифта (хотя, опять же, это будет противоречивым, если выfont
явно не установите семейство и размер ввода ), или '%', если вы делаете жидко-макетная форма. В любом случае, таблица стилей, вероятно, предпочтительнее встроенногоstyle
атрибута.Вам все еще нужно
size
для того<select multiple>
чтобы получить высоту выстраиваться с должным образом вариантов. Но я бы не стал использовать его на<input>
.источник
Я хочу сказать, что это идет вразрез с «общепринятым мнением», но я обычно предпочитаю использовать размер. Причиной этого является как раз та причина, по которой многие говорят, что нет: ширина поля будет варьироваться от браузера к браузеру, в зависимости от размера шрифта. В частности, он всегда будет достаточно большим, чтобы отображать указанное количество символов, независимо от настроек браузера.
Например, если у меня есть поле даты, я обычно хочу, чтобы поле было достаточно широким для отображения 8 или 10 символов (двухзначный месяц и день и двух- или четырехзначный год с разделителями). Установка атрибута размера, по сути, гарантирует мне, что вся дата будет видимой, с минимальным потерянным пространством. Аналогично для большинства чисел - я знаю диапазон ожидаемых значений, поэтому я установлю для атрибута размера правильное количество цифр плюс десятичную точку, если применимо.
Насколько я могу судить, ни один атрибут CSS не делает этого. Например, установка ширины в em основана на высоте, а не на ширине, и, следовательно, не очень точна, если вы хотите отобразить известное количество символов.
Конечно, эта логика не всегда применима - например, поле ввода имени может содержать любое количество символов. В этих случаях я вернусь к свойствам ширины CSS, обычно в px. Однако я бы сказал, что большинство полей, которые я делаю, имеют какой-то известный контент, и, указав атрибут размера, я могу убедиться, что большая часть контента в большинстве случаев отображается без отсечения.
источник
ex
модуль для этого, хотя использование размера все еще упрощает большинство случаев, не имея десятки идентификаторов / классов в вашем CSS для ширины.ex
это высота символа (в частности, «X»), а не ширина - какem
. Поскольку не существует фиксированной связи между высотой и шириной символа (x или иным образом), нет никаких оснований полагать, что использование высоты символа для установки ширины поля сделает поле правильной шириной, чтобы показать любой заданное количество символов. Это может быть шире или уже, в зависимости от шрифта. Теперьch
устройство выглядит многообещающе, но не поддерживается в IE менее 9, что было бы проблемой, когда я писал это.ch
могло бы быть лучше, к сожалению, некоторые нули тонкие, и это может не измерить полное пространство символов ...size
атрибут стремится сделать именно это. Возможно, вы правы,ex
это разумная альтернатива, но факт остается фактом: это атрибут высоты, а не атрибут ширины.size
является атрибутом ширины, но не CSS.Я только что боролся со столом, который я не мог сделать меньше, независимо от того, какой элемент я пытался сделать меньше, ширина стола осталась прежней. Я искал, используя firebug, но не смог найти элемент, который устанавливал ширину так высоко.
Наконец я попытался изменить атрибут размера входных текстовых элементов, и это исправило это. По какой-то причине атрибут size превысил ширину CSS. Я использовал jQuery для динамического добавления строк в таблицу, и именно эти строки содержали входные данные. Так что, возможно, когда речь идет о динамическом добавлении входных данных с помощью функции appendTo (), может быть, лучше установить атрибут размера вместе с шириной.
источник
Вы получите больше согласованности, если будете использовать ширину (ваш второй пример).
источник
Вы можете изменить размер, используя стиль и ширину, чтобы изменить размер текстового поля. Вот код для этого.
Используйте выравнивание, чтобы центрировать текстовое поле.
источник
И
size
атрибут в HTML, иwidth
свойство в CSS будут устанавливать ширину<input>
. Если вы хотите установить ширину, равную ширине каждого символа, используйте**ch**
единицу, как в:источник
HTML контролирует семантическое значение элементов. CSS контролирует макет / стиль страницы. Используйте CSS, когда вы контролируете свой макет.
Короче говоря, никогда не используйте size = ""
источник