Niekonsekwetne Model blokowy między <input type = "submit" /> i <input type = "text" />

Question

zdałem sobie sprawę, że <input type="submit"/> ma model border-box skrzynki, natomiast <input type="text"/> ma model content-box pudełko. Takie zachowanie występuje w IE8 i FF. Niestety, to uniemożliwia zastosowanie tego stylu dla ładnych, równomiernie rozłożonych wejść:

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

Czy to prawidłowe zachowanie przez IE i FF? Czy istnieje ten problem w różnych przeglądarkach?

Answer 1

Czy to prawidłowe zachowanie przez IE i FF?

To nie jest tak naprawdę określone w standardzie, w jaki sposób dekoracje pól formularza są kontrolowane przez CSS. Pierwotnie zostały one zaimplementowane jako widżety OS, w którym to przypadku rozmiar marginesów miałby sens. Później przeglądarki zostały zmigrowane do renderowania samych widżetów za pomocą obramowania CSS/padding/etc. W takim przypadku zmiana rozmiaru pola zawartości miałaby sens. Niektóre przeglądarki (IE) renderują pola formularzy jako połączenie obu, co oznacza, że ​​można w końcu wybierać pola wyboru, które nie są wyrównane do pól tekstowych.

Czy istnieje sposób na obejście tego problemu w różnych przeglądarkach?

O to najlepsze co możesz zrobić, to powiedzieć przeglądarkę który zaklejania, który chcesz ręcznie za pomocą CSS3:

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

(nie działa na IE6/7, lub gdy w IE8 dziwactw lub trybie zgodności.)

Answer 2

Masz dwie możliwości rozwiązania tego problemu 1) Jeśli piszesz kod CSS dla wejścia, ma ono zastosowanie do każdego wejścia element.Instead korzystania z tego dla Evert jednego z nich, po prostu zrobić dla konkretnych rodzajów

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

2) Zawsze używam deklaracji klasy po zresetowaniu znanych nazw znaczników.

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

i używać go jak

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

Mam nadzieję, że to pomaga.

Answer 3

jest css naprawić tylko dla niego

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

Dzięki Muhammad Atif Chughtai

Answer 4

Użyłem tego rozwiązania CSS, aby uzyskać identyczne wysokości przycisków i tekstu; działa w IE, FF i Chrome. Zasadniczo chodzi o to, aby zmusić wysokość elementów wejściowych do większych niż domyślna wysokość pudełka. Zrób to dla tekstu i przycisku:

• Ustaw marginesy i dopełnienie na 0. Daje to najmniejsze możliwe pole "naturalne".
• Ustaw pionowe wyrównanie do środka. Skompensuje to dopełnienie = 0, aby uzyskać odstępy powyżej/poniżej tekstu.
• Użyj wysokości/szerokości, aby kontrolować wymiary tekstu i przycisku. Wysokość tekstu musi być większa o kilka pikseli od wysokości czcionki (aby zastąpić domyślne wymiary pola).Wysokość przycisku musi być o 2 piksele większa od tekstu (ze względu na różnice między tekstem a modelami skrzynki).

Przykład:

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