2012-12-01 8 views
8

I gesetzt Höhe:html Eingabe und wählen Sie unterschiedliche Höhe

input,select{height: 20px;} 

aber in Browser es Höhe ist input : 20px und select 18px, ich weiß nicht, warum, weil vor der Eingabe und wählen Sie reseted wurde. Wenn ich <!DOCTYPE html> entferne dann ist ok, aber dann IE nicht zentriert Seite.

input, select{ 
    box-sizing: border-box; 
} 

Herstellerspezifische Präfixe wie moz- oder webkit- könnte gelten:

+0

Überprüfung: http://stackoverflow.com/questions/10001291/aligning-text-and-select-boxes-to-the-same-width-in-css – alditis

+1

http://stackoverflow.com/questions/9767612/issue-with-input-select-tag-höhe-in-form – Vucko

+0

@Vucko danke, vielleicht kennst du die Standard-Rahmenfarbe? ? – Wizard

Antwort

10

Dies kann durch Einstellen der box-sizing Eigenschaft Ihrer Elemente border-box korrigiert werden.

+0

Mann, ich suche seit 10 Minuten danach. Schlechteste 10 Minuten meines Tages! – Bitterblue

2

Ich konnte die Höhe meiner SELECT zu genau was ich in IE8 und 9 wollte. Der Trick ist, die box-sizing Eigenschaft auf content-box zu setzen. Wenn Sie dies tun, wird der Inhaltsbereich des SELECT auf die Höhe eingestellt. Beachten Sie jedoch, dass die Werte margin, border und padding nicht in der Breite/Höhe des Werts SELECT berechnet werden. Passen Sie diese Werte entsprechend an.

select { 
    display: block; 
    padding: 6px 4px; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing:content-box; 
    box-sizing:content-box; 
    height: 15px; 
} 

Hier ist eine funktionierende jsFiddle. Würde es Ihnen etwas ausmachen, die richtige Antwort zu bestätigen und zu markieren?

Verwandte Themen