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

Question

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

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

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

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

Answer 1

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

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

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

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

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

Answer 3

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

Answer 4

Мы склонны создавать отдельные таблицы стилей для 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

и т.д ...