Teilen Sie ein Beispiel-Tutorial zur vertikalen Zentrierung von Eingabetext und zu Problemen bei der Schaltflächenausrichtung

1. Box-Modellproblem: Bitte CSS zurücksetzen

2. Schaltflächen sind nicht ausgerichtet: Bitte schweben -align:middle;Dann berechne die Breite und Höhe, um sie auszurichten

3 nicht zentriert: Zeilenhöhenattribut Hinweis: IE8 unterstützt das Schreiben von Schriftarten nicht (oder ein bestimmter Stil unterstützt es nicht)

IE-Browser wurde auf IE8 getestet, verwenden Sie IE5 , 6 und 7 mit Vorsicht.

Ursache des Problems: Box-Modell

1. Box-Modell:

Fügen Sie 2 Eingaben auf der Seite ein, ein Textfeld und eine Schaltfläche (Breite und Höhe ohne andere Stile festlegen)

input[type='text']{width:400px;height:45px;}

input[type='button']{width : 45px;height:45px;}

Beobachtung: IE8: Textfeldrand:1px;padding:2px;

Button border:3px;padding:1px 8px;

Firefox: Textfeldrand:1px;padding:2px;

Schaltflächenrand:3px;padding:0px 8px;

Google: Textfeldrand:2px;padding:1px 0px;

Schaltflächenrand: 2px; Innenabstand: 1px 6px;

Stil hinzufügen, um Rand und Innenabstand gleich zu machen

input[type='text']{width :400px ;height:45px;border:1px durchgehend rot;padding:0;}

input[type='button']{width:45px;height:45px;border:1px durchgehend rot;padding:0 ;}

Beobachtung:

IE8: Textfeldrand:1px;Inhalt:202x47 (IE-Boxmodell)

Schaltflächenrand:1px;Inhalt:45x45 (IE-Boxmodell ) )

Firefox: Textfeldrand:1px;Inhalt:200x45

Schaltflächenrand:1px;Inhalt:43x43

Google: Textfeldrand:1px;Inhalt:200x45

Schaltflächenrand:1px;Inhalt:43x43

2. Schaltflächenausrichtungsmethode: Floating (Der Grund dafür ist, dass der Offset unterschiedlich ist und ich nicht nach weiteren Informationen gesucht habe . Sie können diesen Aspekt selbst ergänzen.

input[type='text']{width:400px;height:45px;border:1px solid red;padding:0;float:left;}
input[type='button ']{width:45px;height:45px;border:1px solid red;padding:0;float:left;}

Siehe Schritt 2, Berechnen Legen Sie die Breite und Höhe selbst fest und richten Sie sie aus (Einige haben möglicherweise keinen Rand, verwenden Sie stattdessen die Hintergrundfarbe, bitte stellen Sie den Rand ein: 0; passen Sie die Höhe selbst an)
input[type='text']{width :400px;height:45px;border:1px solid red; padding:0;float:left;}
input[type='button']{width:47px;height:47px;border:1px solid red;padding: 0;float:left;}

3. IE8-Textzentrierung: Zeilenhöhe Hinweis: IE8 unterstützt das Schreiben von Schriftarten nicht

Ersetze Schriftart:normal 18px „Microsoft Yahei "; mit Schriftgröße:18px;Schriftstil: normal;Schriftfamilie:"Microsoft Yahei"!

Oder (Sie können die Schreibmethode „font:normal 18px „Microsoft Yahei“; verwenden, aber nicht in der Mitte)
input[type='text']{width:400px;height:25px ; padding:10px 0px;border:1px solid red;float:left;}
input[type='button']{width:47px;height:47px;line-height: 47px;border:1px solid red;padding : 0;float:left;}

Das obige ist der detaillierte Inhalt vonTeilen Sie ein Beispiel-Tutorial zur vertikalen Zentrierung von Eingabetext und zu Problemen bei der Schaltflächenausrichtung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!