Warum ist der Text in einem Dropdown-Menü höher als der Text im benachbarten div?

Question

Mit Blueprint CSS habe ich eine Kopfzeile auf meiner Seite erstellt.

Was ich nicht verstehe ist, warum das Dropdown-Menü in der Zeile etwas höher als der Text in der Div auf der linken Seite (The quick brown fox jumped over the lazy dog) erscheint.

Wenn ich die Klasse prepend-top zum Dropdown-Div hinzufügen, erscheint das Dropdown-Menü etwas niedriger als der Text im benachbarten div (The quick brown fox jumped over the lazy dog).

Wie bekomme ich den Text in beiden Elementen auf der gleichen horizontalen Ebene in der Zeile angezeigt?

<div class="span-24 last"> 

     <div class="span-21">The quick brown fox jumped over the lazy dog</div> 

     <div class="span-3 last"> 
      <select name="test" id="test"> 
       <option id="test1" value="test1" selected>test1</option> 
       <option id="test2" value="test2" selected>test2</option> 
       <option id="test3" value="test3" selected>test3</option> 
      </select> 
     </div> 
    </div> 

CSS:

body 
{ 
    font:12px/18px 'Times New Roman',Times,serif; 

} 

#test 
{ 
    font: 170% 'Times New Roman',Times,serif; 
} 

Wie Sie aus der CSS sehen können, ist die Schriftart für den Drop-Down wesentlich größer als die Schriftart für den Rest des Textes auf der Seite.

Answer 1

Wenn Sie die Kurzschrift-Eigenschaft Font verwenden und einige der Werte weglassen, werden diese Werte nicht vererbt, sie werden auf ihren "Anfangswert" zurückgesetzt.

Also in Ihrem Beispiel, weil Sie keine Zeilenhöhe in Ihrem Nachkommen definiert haben, wurde es zurückgesetzt - es erbte die 18px nicht.

http://www.w3.org/TR/CSS2/fonts.html#font-shorthand

Es ist wahrscheinlich kompliziert auch ein wenig mehr durch die Tatsache, dass Sie ein Select-Element stehen Schlange, die einige zusätzliche Fragen haben können je nachdem, welcher Browser und Plattform, um Ihr Surfen auf, weil einige Browser verwenden native System Widgets für Formularelemente.