Непоследовательная полевая модель между <input type="submit"/ "> и <input type =" text "/" >

Я понял, что <input type="submit"/> имеет коробчатую модель border-box, тогда как <input type="text"/> имеет модель окна content-box. Такое поведение присутствует в IE8 и FF. К сожалению, это мешает мне применить этот стиль для приятных равномерных входов:

input, textarea
{
    border: 5px solid #808080;
    padding:0px;
    background-color:#C0C0C0;
    width:20em;
}

Является ли это правильным поведением IE и FF? И существует ли кросс-браузерный способ решения этой проблемы?

ОТВЕТЫ

Ответ 1

Является ли это правильным поведением IE и FF?

В стандарте не указано, каким образом оформление полей формы контролируется CSS. Первоначально они были реализованы как виджеты ОС, и в этом случае значение ширины рамки было бы разумным. Более поздние браузеры переносились на визуализацию самих виджетов с использованием границ CSS/padding/и т.д., И в этом случае размер содержимого содержимого будет иметь смысл. Некоторые браузеры (IE) визуализуют поля формы как сочетание обоих, что означает, что вы можете в конечном итоге выбирать поля, не выстраивающиеся в текстовые поля.

И есть ли кросс-браузерный способ решения этой проблемы?

О лучшем, что вы можете сделать, это указать браузеру, размер которого вы хотите вручную, используя CSS3:

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

(Не будет работать в IE6/7 или IE8, если вы находитесь в режиме quirks или совместимости.)

Ответ 2

У вас есть два варианта решения этой проблемы 1) если вы пишете код css для ввода, он применяется для каждого элемента ввода. Вместо использования этого для evert один из них, просто для определенных типов

input[type="submit"],input[type="text"]
{
    border: 5px solid #808080;
    padding:0px;
    background-color:#C0C0C0;
    width:20em;
}

2) Я всегда использую объявления классов после я reset известных имен тегов.

.MySubmit
{
    border: 5px solid #808080;
    padding:0px;
    background-color:#C0C0C0;
    width:20em;
}

и используйте его как

<input type="submit" class="MySubmit" />

Надеюсь, это поможет.

Ответ 3

Для него существует только css

div.search input[type="text"] { width: 110px; margin: 0; background-position: 0px -7px; text-indent:0;  padding:0 15px 0 15px; }
/*ie9*/ div.search input[type="text"] {   border-left: 25px solid transparent; }
/*ie8*/ div.search input[type="text"] {   border-left: 25px solid transparent; background-position-x: -16px; padding-left: 0px; line-height: 2.5em;}

Спасибо Мухаммад Атиф Чюттай

Ответ 4

Я использовал это решение CSS, чтобы получить одинаковые высоты кнопок и текста; он работает в IE, FF и Chrome. В принципе, идея состоит в том, чтобы заставить высоту входных элементов больше, чем высота окна по умолчанию. Сделайте это как для текста, так и для кнопки:

  • Установите поля и отступы на 0. Это дает минимально возможную "естественную" ячейку.
  • Установить вертикальное выравнивание по центру. Это компенсирует padding = 0, чтобы получить пробел выше/ниже текста.
  • Используйте высоту/ширину для управления размерами текста и кнопки. Высота текста должна быть на несколько пикселей больше высоты шрифта (чтобы переопределить размеры окна по умолчанию). Высота кнопки должна быть на 2 пикселя больше текста (из-за различий между текстовыми и текстовыми модулями).

Пример:

input { margin:0; padding:0; border:solid 1px #888; vertical-align:middle; height:30px; }
input[type="submit"] { height:32px; }