модель Противоречивые коробки между <тип входного = «представить» /> и <входной тип = «текст» />

Question

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

Answer 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 когда это в причуд или режиме совместимости.)

Answer 2

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

 
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" /> 

Я надеюсь, что это помогает.

Answer 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;} 

Благодарности Мухаммад Atif Chughtai

Answer 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; }