CSS -Untersteinungen sind zu dünn und zu niedrig in Chrom

Detaillierte Erläuterungs- und Reparaturvorschläge für CSS unterstreichen die Anzeige des Chrombrowsers

In diesem Artikel werden zwei Themen erläutert, die beim Testen der neuen CSS-Eigenschaften text-decoration-thickness und text-underline-offset in Chrome getestet werden.

Inhaltsverzeichnis

• Der Standardunterstrich ist inkonsistent
• Überschreiben Sie den Browser -Standardstil
• Chrombug 1: Das unterstrichene Unter -MacOS -System ist zu dünn
• Chrombug 2: Unterstrichene Position zu niedrig zu niedrig
• So helfen Sie zuerst, Chrom -Browser -Fehler zu lösen

Der Standardunterstrich ist inkonsistent

Fügen Sie Textlinks zu einer einfachen Webseite hinzu, setzen Sie die Schriftart auf Arial und vergleichen Sie dann die unterstrichenen Display -Effekte unter verschiedenen Browsern und Betriebssystemen. Die Ergebnisse zeigen, dass die Standard -Unterstrichdicke und die vertikale Position (Basisversatz) verschiedener Browser inkonsistent sind. Dies entspricht den Bestimmungen des CSS -Textdekorationsmoduls, das das folgende Standardverhalten (Autowert) angibt:

Der Benutzeragent wählt die entsprechende Textdicke der Textzeile aus. [...] Benutzeragent wählt den entsprechenden Untersatz für Unterstriche aus.

Überschreiben Sie den Browser -Standardstil

Zwei neue CSS -Eigenschaften können die Dicke und den Versatz des Unterstrichs genau definieren:

• text-decoration-thickness
• text-underline-offset

Mit diesen beiden Eigenschaften können Sie auch auf verschiedenen Browsern wie Firefox (Gecko Engine) und Safari (Webkit Engine) konsistente Unterstricheffekte erzeugen.

 H1 {
  Textdekoration: Unterstreichung;
  Textdekoration Dickheit: 0,04EM;
  Text-Underline-Offset: 0,03EM;
}

HINWEIS: text-decoration-thickness Eigenschaft hat auch einen speziellen Wert from-font , der den Browser anweist, die bevorzugte Unterstreichung der Schriftart der Schrift selbst zu verwenden (falls verfügbar). Nach dem Test ist der Unterstricheffekt verschiedener Schriftarten immer noch inkonsistent.

Chrombug 1: Das unterstrichene Unter -MacOS -System ist zu dünn

Wenn text-decoration-thickness der Dicke auf einen Schriftwert mit Schriftart eingestellt ist, der als Nichtteger-Pixelwert berechnet wird, rundet Chrom anstatt abzurunden. Wenn das deklarierte Gewicht beispielsweise 0.06em beträgt und die Berechnung 1.92px beträgt, zeichnet Chrom einen Unterstrich mit 1px -Gewicht anstelle von 2px. Dieses Problem ist nur auf MacOS -Systeme beschränkt.

 A {
  Schriftgröße: 2EM; / * Das Berechnungsergebnis beträgt 32px * /
  Textdekoration Dicke: 0,06EM;
}

Screenshots zeigen, dass die Textdekorationslinie in Chrom (dritte Linie) doppelt so dünn ist wie in Safari- und Firefox -Browsern.

Weitere Informationen finden Sie unter Chrom -Ausgabe Nr. 1255280.

Chrombug 2: Unterstrichene Position zu niedrig zu niedrig

text-underline-offset Eigenschaft ermöglicht eine genaue Festlegung des Abstands zwischen der Buchstabenbasis und dem Unterstrich (den Versatz des Unterstrichs im Verhältnis zur Basislinie). Leider implementiert Chrome Browser dies derzeit nicht korrekt, was dazu führt, dass die Unterstrichposition zu niedrig ist.

 H1 {
  Textdekoration: Unterstreichung;
  Text-Decoration-Farben: #F707;

  / * Deaktivieren "überspringen Ink überspringen" */
  -webkit-text-decoration-skip: keine; / * safari * /
  Text-Decoration-Skip-Ink: Keine;

  /* Decken Sie die gesamte sinkende Linie ab*/
  Textdekoration Dicke: 0,175em;
  Text-Underline-Offset: 0; /* Grundlinie ohne Offset* /
}

Aufgrund dieses Fehlers kann der Unterstrich nicht vollständig auf die Grundlinie verschoben werden.

Weitere Informationen finden Sie in Chromium Ausgabe Nr. 1172623.

HINWEIS: Wie im obigen Bild gezeigt, zeichnet Safari unter der Oberseite der Sink -Linie anstelle des Bodens unterstreicht. Dies ist ein Webkit -Fehler, der kürzlich behoben wurde. Diese Korrektur sollte in der nächsten Version von Safari enthalten sein.

So helfen Sie zuerst, Chrom -Browser -Fehler zu lösen

Die beiden neuen CSS -Eigenschaften, die zum Stylen -Unterstieg verwendet werden, sind willkommene Ergänzungen zu CSS. Ich hoffe, diese beiden verwandten Chromfehler können so schnell wie möglich behoben werden. Wenn diese CSS -Funktionen für Sie wichtig sind, fügen Sie diese Fehler in Chroms Bug Tracker zu sehen, um Ihre Besorgnis auszudrücken.

Das obige ist der detaillierte Inhalt vonCSS -Untersteinungen sind zu dünn und zu niedrig in Chrom. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!