Beeinflusst ein einzelnes Zeichen die Zeilenhöhe in verschiedenen Browsern?

Kann die Zeilenhöhe durch ein bestimmtes Zeichen beeinflusst werden?

In diesem Artikel wird untersucht, ob ein bestimmtes Textzeichen die Zeilenhöhe beim Rendern ändern kann, ein Verhalten in Firefox für Windows 10 bemerkt.

Der bereitgestellte Codeausschnitt zeigt zwei Absätze mit einem ASCII-Unterstrich, der an einer Stelle hinzugefügt wurde. In Firefox führt der Unterstrich dazu, dass sich die Zeilenhöhe verringert und das Zeichen abschneidet, während andere Browser dieses Verhalten nicht zeigen.

Es stellt sich die Frage, welches Verhalten richtig ist. line-height: 1 impliziert normalerweise die Fähigkeit, jeden Text in eine Zeile dieser Größe einzufügen. Das Charakterdesign kann jedoch besondere Herausforderungen mit sich bringen.

Korrektes Verhalten

Alle beobachteten Verhaltensweisen gelten aufgrund der Unterschiede in den Standardschriftarten zwischen Browsern und Betriebssystemen als korrekt.

Zeilenhöhe und Zeichendesign

Die Zeilenhöhe wirkt sich auf den Zeilenrahmen aus Größe, aber es steuert nicht direkt die Zeichenwiedergabe. Zeichen werden durch den Inhaltsbereich der Schriftart definiert, der nicht von der Zeilenhöhe beeinflusst wird.

Line-height: 1 garantiert nicht, dass ein Zeichen in die angegebene Höhe passt, da die Schriftart möglicherweise nicht so gestaltet ist Zeichen, die in dieses Leerzeichen passen.

Beispiel

Der folgende Codeausschnitt veranschaulicht den Unterschied zwischen der Zeile Box und Inhaltsbereich. Wenn sich die Zeilenhöhe ändert, ändert sich die Größe des roten Hintergrunds des Span-Elements (das das Zeilenfeld darstellt), während der Text (der den Inhaltsbereich darstellt) unverändert bleibt:

Das obige ist der detaillierte Inhalt vonBeeinflusst ein einzelnes Zeichen die Zeilenhöhe in verschiedenen Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!