Warum erbt mein „Element“ nicht den Schriftstil seines übergeordneten Elements?

Inkompatibilität von Schriftartenvererbung

In CSS erben Elemente die Schriftarteigenschaften ihrer übergeordneten Elemente, z. B. Element. Die Das Element folgt dieser Regel nicht immer.

Im bereitgestellten Beispiel ist das und Elemente haben die gleiche Schriftart Verdana, aber die Das Element wird als „MS Shell Dlg“ angezeigt. Dies liegt daran, dass Formularelemente, einschließlich , über eine Standardschriftarteinstellung verfügen, die geerbte Schriftarteigenschaften überschreibt.

Standardschriftart überschreiben

Um eine konsistente Schriftartenvererbung sicherzustellen Für alle Elemente müssen die Standardschriftarteinstellungen für Formularelemente explizit überschrieben werden. Dies kann durch Hinzufügen der folgenden CSS-Regel erreicht werden:

<code class="css">input, select, textarea, button {
  font-family: inherit;
}</code>

Durch das Hinzufügen dieser Regel erben alle Formularelemente die Schriftarteigenschaften ihrer übergeordneten Elemente, einschließlich des Element.

Demonstration

Eine Live-Demonstration der Lösung ist unter http://jsfiddle.net/gaby/pEedc/1/ verfügbar. In dieser Demo sind sowohl das und Elemente zeigen wie erwartet die Schriftart Verdana an.

Hinweis:

Während diese Lösung in den meisten modernen Browsern funktioniert, unterstützen Internet Explorer 9 und früher keine Schriftartenvererbung für Formulare Elemente. In diesen Browsern überschreiben die Standardschriftarteinstellungen weiterhin die geerbten Schrifteigenschaften.

Das obige ist der detaillierte Inhalt vonWarum erbt mein „Element“ nicht den Schriftstil seines übergeordneten Elements?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!