font-size auf dem Körperelement angegeben wird durch die Eingabe ignoriert

Ich habe eine einfache Web-Seite hier http://www.webdevout.net/test?0V, reproduziert unterfont-size auf dem Körperelement angegeben wird durch die Eingabe ignoriert

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<style type="text/css"> 
body { font-size: 12px;} 
</style> 
<title>Test</title> 
</head> 
<body> 
<p>test</p> 
<form action="/foo" method="get"> 
    <fieldset> 
    <input type="text" value="bar" /> 
    </fieldset> 
</form> 
</body> 
</html>

Wenn ich Firebug verwenden, um die Seite zu überprüfen, wird der Text „Test“ 12px wie erwartet , aber der Text "bar" in der Eingabe ist 11px, ich würde erwarten, dass es 12px ist. Was geht hier vor? Versuchen

Quelle

2010-12-11 pingu

Einige zusätzliche Informationen http://www.komodomedia.com/blog/2006/10/css-trickery-part-5-inheritance/ – pingu

im Browser Sie den Standardwert für die font-size Eigenschaft verwenden, ist nicht inhert oder ein Prozentsatz, em oder anderer relativer Längenwert. d.h. es ist ein absoluter Wert.

Legen Sie die Schriftgrößeneigenschaft selbst fest, z. input { font-size: 100%; }

Verwenden Sie eine reset stylesheet.

Quelle

2010-12-11 18:16:24 Quentin

Danke für die Antwort David, aber CSS-Vererbung besagt nicht, dass die Eingabe den Stil ihrer Eltern übernehmen wird, die ihrerseits von ihrer Eltern erben und schließlich das Element erreichen, wo die Schriftgröße als 12px angegeben wird . Interessanterweise kam dieses Problem von Eric Meyers Reset Stylesheet. – pingu

Würde 'font-size: erben;' nicht so gut? –

@pingu - Nur wenn der Wert der font-size-Eigenschaft auf "erben" gesetzt ist, was nicht der Fall ist. – Quentin

* { 
    font-size:12px; 
}

Quelle

2010-12-11 18:14:24 tybro0103

Das behebt es, aber es ist ein bisschen wie ein Vorschlaghammer, ich sollte nicht Muss ich das tun? – pingu

Gut, da alle sichtbaren Elemente in den Körper gehen, ist es wirklich nicht anders, außer dass es auch an Eingängen funktioniert. – tybro0103

Einige Browser Stil Formularelemente auf der Basis ihrer entsprechenden OS-Elemente der Benutzeroberfläche. Daher werden möglicherweise nicht alle Stile berücksichtigt, die Sie auf body anwenden (d. H., Sie könnten nicht von ihm erben).

Sie müssen diese spezifischen Elemente auswählen und dann die Regeln anwenden.

body, input { 
    font-size: 12px; 
}

Quelle

2010-12-11 18:16:19 BoltClock

Danke BoltClock, ich habe in den Regeln zur Spezifität nichts davon erwähnt, sind es nur Eingaben? oder wählt auch? – pingu

Inputs, selects, buttons und textareas denke ich. – BoltClock

font-size auf dem Körperelement angegeben wird durch die Eingabe ignoriert

Antwort

Verwandte Themen