Inkonsistentes Box-Modell zwischen <input type="submit"/> und <input type="text" />

Question

Ich habe festgestellt, dass ein Box-Modell border-box hat, während ein Box-Modell content-box hat. Dieses Verhalten tritt in IE8 und FF auf. Leider hindert mich dies daran, diesen Stil für gleichmäßig dimensionierte Eingabefelder anzuwenden:

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

Ist dieses Verhalten von IE und FF korrekt? Und gibt es eine Möglichkeit, dieses Problem browserübergreifend zu umgehen?

Answer 1

Ist dies korrektes Verhalten von IE und FF?

Im Standard wird nicht wirklich festgelegt, wie die Gestaltung von Formularfeldern durch CSS gesteuert wird. Ursprünglich wurden sie als Betriebssystem-Widgets implementiert, und in diesem Fall würde die Border-Box-Größenangabe Sinn ergeben. Spätere Browser haben sich jedoch darauf verlegt, die Widgets selbst mit CSS-Bordern/Padding usw. zu rendern, und in diesem Fall wäre die Content-Box-Größenangabe sinnvoll. Einige Browser (IE) rendern Formularfelder als Mischung aus beidem, was bedeutet, dass Sie Select-Boxen haben können, die nicht mit Textfeldern übereinstimmen.

Und gibt es einen plattformübergreifenden Weg um dieses Problem zu lösen?

Das Beste, was Sie tun können, ist dem Browser manuell mit CSS3 mitzuteilen, welche Größenangabe Sie möchten:

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

(Funktioniert nicht bei IE6/7 oder bei IE8 im Quirks- oder Kompatibilitätsmodus.)

Answer 2

Du hast zwei Möglichkeiten, um dieses Problem zu lösen 1) Wenn du CSS-Code für das Input schreibst, wird er für jedes Input-Element angewendet. Anstatt dies für jedes einzelne zu verwenden, mach es einfach für spezifische Typen

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

2) Ich benutze immer Klassendeclarationen, nachdem ich bekannte Tag-Namen zurückgesetzt habe.

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

und benutze es so

Ich hoffe, das hilft.

Answer 3

Es gibt eine reine CSS-Lösung dafür

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

Danke Muhammad Atif Chughtai

Answer 4

Ich habe diese CSS-Lösung verwendet, um identische Button- und Text-Höhen zu erhalten; es funktioniert in IE, FF und Chrome. Grundsätzlich geht es darum, die Höhe der Eingabeelemente auf größer als die Standardfeldhöhe zu erzwingen. Tun Sie dies sowohl für den Text als auch für den Button:

• Setzen Sie die Ränder und das Padding auf 0. Dies ergibt die kleinste mögliche "natürliche" Box.
• Setzen Sie den vertical-align auf Mitte. Das gleicht das Padding=0 aus, um Abstand über/unter dem Text zu erhalten.
• Verwenden Sie height/width, um die Dimensionen von Text und Button zu steuern. Die Text-Höhe muss mehrere Pixel größer sein als die Schrifthöhe (um die Standardfeldabmessungen zu überschreiben). Die Höhe des Buttons muss um 2 Pixel größer sein als der Text (aufgrund der Unterschiede zwischen Text- und Button-Boxmodellen).

Beispiel:

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