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

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

10 голосов
/ 20 сентября 2009

Я понял, что <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? И есть ли кросс-браузерный способ решения этой проблемы?

Ответы [ 4 ]

17 голосов
/ 20 сентября 2009

Это правильное поведение IE и FF?

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

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

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

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

(Не работает на IE6 / 7 или IE8 в режиме совместимости или в режиме совместимости.)

1 голос
/ 20 сентября 2009

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

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

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

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

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

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

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

0 голосов
/ 10 октября 2014

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

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

Пример: 

input { margin:0; padding:0; border:solid 1px #888; vertical-align:middle; height:30px; }
input[type="submit"] { height:32px; }
0 голосов
/ 14 марта 2013

Существует исправление только для 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;}

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

...