Как сделать текстовую область одинаковой ширины в IE и Firefox?

Question

Я хочу иметь текстовую область, это 500pxэто CSS, который я использую для текстовой области:

width: 498px;
padding: 0px;
margin: 0px;

Я заметил, что IE и Chrome имеют 1px границы по умолчанию, с другой стороны, FF имеют 2px граница, которая приводит к текстовой области 502px вместо 500pxкакие-нибудь обходные пути?

Просто примечание, я мог бы явно указать ширину границы texarea, т.е. ширина рамки: 1px, но проблема здесь в том, что он плохо работает с IE (стандартная граница textarea в IE визуально не выглядит хорошо, когда установлена ​​граница 1px), Я мог бы изменить цвет границы, но я не хочу этого делать, я предпочитаю сохранять стили браузеров по умолчанию, я просто хочу, чтобы ширина была одинаковой во всех браузерах без изменения стилей по умолчанию или установки цвета на граница, это возможно?

Answer 1

Вы можете установить одинаковые стили всех браузеров по умолчанию, используя таблицу "Сброс CSS" в верхней части документа. Мне самому нравится сброс CSS YUI. Это должно установить базовые стили для всех элементов управления, чтобы быть одинаковыми во всех браузерах, и это должно позволить более предсказуемое расположение.

IMO, если вы позволите каждому браузеру иметь свой собственный стиль (который может даже настраиваться пользователем!), Вы на пути к непредсказуемому стилю для вашего приложения с проблемами, возникающими в местах, о которых вы никогда не думали. Лучше использовать сброс CSS, а затем соответствующим образом стилизовать ваши приложения. Если вы зашли на сайт Yahoo (на который есть ссылки), у них также будет свой собственный "базовый" CSS, с которого вы можете начать, что довольно здорово.

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css"> 

Answer 2

Мы склонны создавать отдельные таблицы стилей для IE и FF, чтобы обойти их "причуды". Затем можно использовать простой фрагмент кода, чтобы убедиться, что используется правильная таблица стилей.

<!--[if lte IE 6]> works for < than IE 6
<link href="/css/IE6Below.css" media="screen" rel="Stylesheet" type="text/css" />
<![endif]-->

Там же работает для IE 6

так далее...

Answer 3

Мы используем jQuery для украшения наших html-элементов и позволяем решать кросс-браузерные проблемы.

Answer 4

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

Это не имеет смысла.

Как и другим, я бы порекомендовал использовать таблицу стилей сброса (я большой поклонник Эрика Мейера), а затем стилизовать границы именно так, как вы этого хотите. Легко. Очистить. Нет минусов.