текстовое поле значительно больше в определенном браузере

Question

На моей странице есть текстовое поле ниже:

<input class="message" id="message" name="message" type="text" size="65" />

По какой-то причине в последнем FireFox для OS X он примерно на 200 пикселей шире, чем в последних версиях Chrome (mac / pc), FireFox (pc) и IE (pc)

Любые предложения о том, как я могу это исправить или почему это происходит?

Answer 1

Укажите размер с помощью style или class:

<input class="message" id="message" name="message" type="text" style="width:200px;" />

Answer 2

Разместите свой CSS.

Однако, независимо от этого, я думаю, ваше исправление добавляет это правило

    width: 300px; /* change size accordingly */

до

#message {

или

.message {

и удаление размера

<input class="message" id="message" name="message" type="text" />

Answer 3

Браузеры по-разному отображают различные элементы в вашей DOM; В старте проекта, где вы чувствуете, что ваш сайт должен выглядеть одинаково во всех браузерах, один из распространенных подходов, который используют веб-дизайнеры - это запись файла reset.css. Этот файл устанавливает свойства большинства используемых элементов DOM к стандартному значению.

Answer 4

Если вы используете ASP, вы можете использовать метод Request.ServerVariables ("http_user_agent"), чтобы получить информацию о браузере и ОС и установить для переменной (которая в конечном итоге является атрибутом размера текстового объекта сообщения) меньшее значение. размер.

Answer 5

Браузеры обычно отображают элементы формы по-разному (и это также зависит от ОС). Если вы хотите, чтобы ваши элементы формы выглядели одинаково, то стилизуйте их с помощью CSS. В этом случае просто добавьте ширину в ваш CSS следующим образом:

input {
  width: 200px }
}