Firefox zeigt bei Schriftattributen abweichendes Verhalten zu Chrome, Edge und Opera. Fehler?

Zitat von r.e.stahl

Ich weiß, dass meine Schriftattribute nicht immer korrekt geschachtelt sind und ich verlasse
mich in komplizierten Schriftattribut Verschachtelungen manchmal auf die Fehlertoleranz
der Browser.

Ohne, dass du eine Webseite genannt hast, kann ich dir sagen, dass Firefox da sehr fehler-intolerant ist - und das ist gut so! Falsche Verschachtelungen sind einfach zu vermeiden. Wenn man das nicht kann, sollte man besser einen WYSIWYG-Editor nutzen, der das beherrscht, oder das Wissen zu CSS auffrischen.

Zitat von r.e.stahl

Guten Abend,

ich habe ein abweichendes Verhalten vom Firefox Browser zu Edge, Chrome oder Opera
entdeckt: Untenstehender HTML Text gibt drei Zeilen im Schriftattribut bold und underline
aus. Wenn ich diese Datei im Firefox Browser ansehe, so ist die erste Zeile nicht bold, sondern
normal unterstrichen. Bei den beiden folgenden Zeilen wird dagegen die Unterstreichung
korrekt bold ausgegeben.
Wenn ich denselben HTML Text in Edge, Chrome oder Opera ausgebe, erscheint die
Unterstreichung bei allen drei Zeilen in bold, also korrekt.

Ich weiß, dass meine Schriftattribute nicht immer korrekt geschachtelt sind und ich verlasse
mich in komplizierten Schriftattribut Verschachtelungen manchmal auf die Fehlertoleranz
der Browser. Der hier beschriebene Fall sollte imho funktionieren und der Firefox Browser
das nach <u> folgende <b> nicht nur auf den Text, sondern auch auf die Unterstreichung
beziehen. Wie gesagt: Edge, Opera und Chrome machen das so.

Bin gespannt was ihr dazu schreibt.

Mit freundlichem Gruß

Richard Stahl

______________________________Hier der HTML Text____________________________________

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
a:visited {
color: red;
background-color: transparent
text-decoration: underline;
}
p {background-color: white; color: black;}
.klein { font-size:0.6em; }
.treffer {background-color: red; color: white;}
.fn {background-color: white; color: gray;}
h1 {
line-height: 1.1em;
font-size: 1.0em;
}
body {font-family: monospace;}
</style>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>ext cdi Imperialismus des 21. Jahrhunderts</title>
<meta name="robots" content="index, nofollow">
<meta name="description" content="Zum Imperialismus des 21. Jahrhunderts, oder: DIE GANZ NEUE WELTORDNUNG * In eigener Sache Die Zensur von 'Kein Kommentar' ... auf Radio Helsinki April 2026">
</head>
<body style="font-size:140%;">
<p class="klein"> Quelle: Unpatriotische Linke - Contradictio</p>
<pre>
<tt>
den ersten Seiten:
<u><b>EU-Sanktionen gegen Schweizer Ex-Nachrichtenoffizier Jacques</u>
<u>Baud: Die Medien berichten in einer Mischung aus Zustimmung und</u>
<u>Warnung</u>

Alles anzeigen

Sieht bei mir im Firefox 158 so aus:

Im Edge 155.0.4283.45 so:

r.e.stahl

Ob es einfach nur an einem fehlenden Semikolon liegt?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
a:visited {
color: red;
background-color: transparent;
text-decoration: underline;
}
p {background-color: white; color: black;}
.klein { font-size:0.6em; }
.treffer {background-color: red; color: white;}
.fn {background-color: white; color: gray;}
h1 {
line-height: 1.1em;
font-size: 1.0em;
}
body {font-family: monospace;}
</style>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>ext cdi Imperialismus des 21. Jahrhunderts</title>
<meta name="robots" content="index, nofollow">
<meta name="description" content="Zum Imperialismus des 21. Jahrhunderts, oder: DIE GANZ NEUE WELTORDNUNG * In eigener Sache Die Zensur von 'Kein Kommentar' ... auf Radio Helsinki April 2026">
</head>
<body style="font-size:140%;">
<p class="klein"> Quelle: Unpatriotische Linke - Contradictio</p>
<pre>
<tt>
den ersten Seiten:
<u><b>EU-Sanktionen gegen Schweizer Ex-Nachrichtenoffizier Jacques</u>
<u>Baud: Die Medien berichten in einer Mischung aus Zustimmung und</u>
<u>Warnung</u>

Versuche es jetzt einmal.

Und so sollte der "richtige" Code laut Gemini aussehen.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ext cdi Imperialismus des 21. Jahrhunderts</title>
    <meta name="robots" content="index, nofollow">
    <meta name="description" content="Zum Imperialismus des 21. Jahrhunderts, oder: DIE GANZ NEUE WELTORDNUNG * In eigener Sache Die Zensur von 'Kein Kommentar' ... auf Radio Helsinki April 2026">
    
    <style type="text/css">
        body {
            font-family: monospace;
            font-size: 140%;
        }
        p {
            background-color: white; 
            color: black;
        }
        h1 {
            line-height: 1.1em;
            font-size: 1.0em;
        }
        a:visited {
            color: red;
            background-color: transparent;
            text-decoration: underline;
        }
        .klein { 
            font-size: 0.6em; 
        }
        .treffer {
            background-color: red; 
            color: white;
        }
        .fn {
            background-color: white; 
            color: gray;
        }
    </style>
</head>
<body>

<p class="klein">Quelle: Unpatriotische Linke - Contradictio</p>

<pre>
den ersten Seiten:
<b><u>EU-Sanktionen gegen Schweizer Ex-Nachrichtenoffizier Jacques</u></b>
<b><u>Baud: Die Medien berichten in einer Mischung aus Zustimmung und</u></b>
<b><u>Warnung</u></b>
</pre>

</body>
</html>

Zitat von .DeJaVu

kann ich dir sagen, dass Firefox da sehr fehler-intolerant ist - und das ist gut so! Falsche Verschachtelungen sind einfach zu vermeiden.

Definitiv sind fehlerhafte Verschachtelungen zu vermeiden. Dass Firefox „fehlerintoleranter” als andere Browser sei, würde ich allerdings nicht pauschal unterschreiben. Zumal sogar festgelegt ist, wie sich Browser in bestimmten Fehler-Situationen zu verhalten haben. Insofern wäre wirklich der konkrete Fall zu prüfen, bevor man das in diesem Kontext einfach so in den Raum stellt.

Zitat von r.e.stahl

bei dem von mir geposteten HTML-Text handelt es sich meiner Ansicht nach NICHT um einen Verschachtelungsfehler von Schriftattributen. Dass Firefox aber offensichtlich weniger "fehlertolerant" ist (und das auch noch gut sein soll) als Edge, Opera und Chrome lässt meine Affinität zu diesen Browsern wachsen.😒

Unabhängig davon, ob das mit dem Problem zusammenhängt oder nicht, ist es in jedem Fall fehlerhafter Code. Daran gibt es nichts zu verneinen. Dass es deine Affinität zu Browsern wachsen lässt, wenn diese deine Fehler „besser” nach deinen Vorstellungen ausgleichen, lässt mich einfach nur den Kopf schütteln. Ich arbeite in dieser Branche, in der es leider viel zu viele Pfuscher gibt, welche dem Ansehen der gesamten Branche schaden. Entsprechend wenig Verständnis habe ich für deine „Argumentation”. Die generell hohe Fehlertoleranz von HTML hat dem Web mit Sicherheit in den Anfangszeiten geholfen, so sehr an Verbreitung zu gewinnen. Es ist aber auch ein großer Grund dafür, wieso es so viel technisch mangelhafte Qualität im Web gibt. Fehlerintoleranz ist etwas Gutes in der Programmierung. Die Fehlerbehandlung von HTML ist aus Kompatibilitätsgründen leider nie wieder in Ordnung zu bringen.

Zitat von r.e.stahl

Das Problem ist, dass meine in php geschriebene Website Software noch auf Mailbox Software Mitte der 1990er Jahre zurückgeht, wo es noch keine Schriftattribute wie underline, kursiv oder bold (höchstens highlighted) auf DOS Rechnern gegeben hat. Ich habe die Software in den letzten 30 Jahren immer weiter aufgebohrt und 2008 mittels Portierung nach php auf Website Betrieb statt Mailboxbetrieb umgestellt. Die Software enthält ziemlich komplizierte Mechanismen um Plain ASCII Texte in ein Textformat mit ansprechendes Layout mit Schriftattributen umzuwandeln. Sie ist dadurch etwas unübersichtlich geworden. Es ist mir derzeit nicht möglich, Firefox derart entgegenzukommen, dass ich das <b> dem <u> voranstelle und hoffe eher, dass sich Firefox den genannten Browsern Edge, Chrome und Opera anpasst

Das ist ein Defizit deiner Software. Es kann nicht die Aufgabe von Firefox sein, deine Fehler zu kaschieren. Viel mehr darfst du froh über jeden Bug in deiner Software sein, der dir nicht auf die Füße fällt. Aber auf gar keinen Fall darfst du dich darauf verlassen oder gar erwarten, dass sich Firefox deinen Fehlern anpasst. Kümmere dich um deine Bugs!

Zitat von r.e.stahl

Ich weiss allerdings auch, dass Leseprogramme wie Screenreader für Blinde bei nicht korrekt geschachtelten Schriftattributen ins Stolpern kommen können.

Das ist nur ein Grud mehr, die korrekte Verwendung von HTML ernst zu nehmen. Barrierefreiheit sollte jeder Entwickler als Grundrecht behandeln!

Leider ist das ganze Thema der willkürlichen Verschachtelung von HTML-Elementen ja nicht neu bei dir. Auch diese fehlende Einsicht ist ein Grund dafür, wieso ich mein Unverständnis an dieser Stelle so direkt äußere:

Thema

Textausgabe bei teilweise kursiv geschriebenen Wörtern

Hallo community,

ich habe folgendes Problem: Eine Textzeile in einem Dokument gibt die Zeile

„schätzt. Vor die Hochachtung der nationalen Kulturgrößen sollte“

im Firefox Browser aus. Man beachte das Wort Hochachtung, das teilweise kursiv geschrieben ist. Im Seitenquelltext sieht die Zeile so aus:

„schätzt. Vor die <i>Hoch</i>achtung der nationalen Kulturgrößen sollte“

So weit so gut. Nun soll das Wort „Hochachtung“ im Rahmen einer Wortsuche fettgedruckt mit schwarzer Schrift aus rotem…

r.e.stahl

11. Juli 2026 um 20:06

Zitat von r.e.stahl

Vielleicht machen sich die Firefox Entwickler nochmal die Mühe

Hast du es ihnen denn mal geschrieben? Entwickler lesen hier nämlich nicht mit.

r.e.stahl Und auch hier wieder das Semikolon!!

Hinter "background-color: transparent" Zeile 8 gehört ein Semikolon

Du solltest schon sauberer coden oder eventuell reicht es ja auch schon einen gescheiten Editor nutzen, der
Dir solche kleinen Flüchtigkeitsfehler anzeigt!

Aber davon ab, Firefox zeigt beide "Versionen", ob mit oder ohne Semikolon, richtig an,
egal welche HTLM-Version ich von denen, die hier gepostet wurden, nehme.

Zitat von r.e.stahl

Tatsache ist, daß Firefox gegenüber Opera, Chrome und Edge eine Extrawurst brät: Das erste unterstrichene Zeilentrippel wird nur im Firefox normal (also nicht fett) unterstrichen. Opera Chrome und Edge unterstreichen beide Zeilentrippel fett.

Bei mir stellt Firefox beide Absätze absolut identisch dar. Aber Unterschiede zu Windows sind möglich, dazu unten mehr.

Zitat von r.e.stahl

Nur Firefox ignoriert ein nach <u> nachgestelltes <b>.

Nö, der Text ist fett. Damit ist ganz klar erkennbar, dass Firefox das nicht ignoriert.

Zitat von r.e.stahl

Ich dachte immer es sei ein Ziel der Browserentwickler, dass fehlerfreier HTML-Code bei allen Browsern gleich dargestellt wird. Aber offensichtlich scheint dieses Bestreben obsolet zu sein.

Ignorieren wir mal kurz, dass du bis zu diesem Beitrag überhaupt keinen korrekten HTML-Code schreiben wolltest. Selbstverständlich ist das Ziel, eine browserübergreifend konsistente Darstellung. Fakt ist aber, dass du niemals eine hundertprozentige Übereinstimmung im Rendering erhalten kannst, weil unterschiedliche Engines unterschiedlich arbeiten und natürlich in Details Verhaltensunterschiede aufweisen.

Ich habe dir das mal durch GPT 5.6 Sol erklären lassen:

Zitat

Die unterschiedliche Darstellung ist aus dem Code erklärbar – aber nicht zwingend vorgeschrieben. Beide Varianten sind strukturell verschieden:

Markup	Element, das unterstreicht	Dessen Schriftgewicht
<u><b>Text</b></u>	äußeres <u>	normal, typischerweise 400
<b><u>Text</u></b>	inneres <u>	von <b> geerbt, typischerweise 700

Browser verwenden standardmäßig sinngemäß:

CSS

b, strong { font-weight: bolder; }
ins, u    { text-decoration: underline; }

Das entspricht dem vorgeschlagenen HTML-User-Agent-Stylesheet.

Wichtig dabei: text-decoration wird nicht normal vererbt. Das Element, auf dem die Unterstreichung entsteht, bleibt die „decorating box“; seine Linie wird aber über den Text seiner Nachfahren hinweg gezeichnet. Genau dieses Modell beschreibt die CSS-Text-Decoration-Spezifikation.

Warum Firefox unter Windows unterscheiden kann

Ohne eigene Angabe gilt:

CSS

text-decoration-thickness: auto;

Firefox berechnet auto gegenwärtig anhand der Unterstreichungsmetrik des Fonts desjenigen Elements, von dem die Dekoration stammt. Im Firefox-Quellcode wird dafür die underlineSize des Fonts der dekorierenden Box verwendet.

Damit ergibt sich:

• Beim ersten Tripel stammen die Fontmetriken vom normalgewichtigen <u>.
• Beim zweiten Tripel stammen sie vom fettgewichtigen <u>.

Wenn die unter Windows verwendete Monospace-Schrift für Regular und Bold verschiedene Unterstreichungsmetriken besitzt – oder die Werte nach der Rundung auf Gerätepixel etwa einmal bei 1 px und einmal bei 2 px landen –, wird der Unterschied sichtbar.

Unter macOS können Regular und Bold dieselbe Unterstreichungsmetrik liefern oder nach der Pixelrundung identisch enden. Das erklärt, weshalb Firefox dort beide Gruppen gleich darstellen kann. Zusätzlich ist nur die generische Familie monospace angegeben; welche konkrete Schrift verwendet wird, hängt von Browser, Betriebssystem und Benutzereinstellungen ab.

Warum Chromium dicker und einheitlich unterstreicht

Blink, also die Rendering-Engine von Chrome sowie den entsprechenden Opera- und Edge-Versionen, löst auto derzeit schlicht als ein Zehntel der Schriftgröße auf:

Code

const float auto_thickness = font_size / 10.0f;

Siehe TextDecorationThickness::Resolve.

Beide <u>-Elemente haben dieselbe Schriftgröße, obwohl ihr Schriftgewicht verschieden ist. Deshalb erhält Blink in beiden Fällen dieselbe, relativ kräftige Linie. Bei einer üblichen Ausgangsgröße von 16 px ergeben die 140% des Dokuments etwa 22,4 px und damit zunächst ungefähr 2,24 px Unterstreichungsstärke.

Safari verwendet eine eigene WebKit-Berechnung, kann mit seinem auto-Verfahren aber optisch bei einem ähnlichen, dickeren Ergebnis landen. Eine Übereinstimmung mit Chromium ist hier nicht garantiert.

Welcher Browser ist korrekter?

Normativ gibt es keinen eindeutigen Sieger. Für auto sagt die Spezifikation ausdrücklich:

• Der Browser wählt eine angemessene Stärke.
• Fontmetriken dürfen berücksichtigt werden.
• Auch Größen, Schriftarten und Schriftgewichte von Nachfahren dürfen in die Berechnung einfließen.
• Die genaue Stärke ist ansonsten browserdefiniert.

Siehe Definition von text-decoration-thickness und besonders den Abschnitt zur Bestimmung von Position und Stärke.

Firefox bildet die unterschiedliche Verschachtelung nachvollziehbarer ab. Chromium liefert bei gleicher Schriftgröße das optisch einheitlichere Resultat. Beides ist bei auto spezifikationskonform.

Für eine definierte Darstellung

Wenn beide Gruppen sicher gleich aussehen sollen, sollten Verschachtelung und Linienstärke einheitlich festgelegt werden:

HTML

<span class="bold-underlined">EU-Sanktionen …</span>

CSS

.bold-underlined {
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}

Für eine skalierende Stärke wäre beispielsweise 0.09em statt 2px möglich. from-font wäre dagegen gerade dann ungeeignet, wenn plattformübergreifend identische Ergebnisse verlangt werden, weil es ausdrücklich die jeweiligen Fontmetriken verwendet.

Alles anzeigen

Zitat von r.e.stahl

Vielleicht machen sich die Firefox Entwickler nochmal die Mühe die Abweichung des HTML-Textbeispiels in den anderen Browsern Chrome, Opera bzw. Edge anzusehen.

Wieso? Firefox verhält sich korrekt im Rahmen der Spezifikation, siehe Erklärung, und Detail-Unterschiede sind erwartet, vor allem, wenn Rundungen mit reinspielen. Bei dem Thema arbeiten die Browser-Engines nämlich bekanntermaßen sehr unterschiedlich, was sich nicht einfach weiter vereinheitlichen lässt. Wenn du eine bestimmte Darstellung für alle Browser und Betriebssysteme bis ins kleinste Detail erzwingen möchtest, ist es dein Job, das zu gewährleisten. Willkommen im Leben eines professionellen Webentwicklers.

Ideen vorschlagen

Bugs melden

Zitat von r.e.stahl

Das ist keine Antwort auf das was ich geschrieben habe.

Es ist eine Antwort auf das, was ich zitiert habe. Und ich habe dir eine ausführliche Erklärung gegeben, was es mit den Unterschieden bei der Unterstreichung auf sich hat. Du hast das halt komplett ignoriert und bist mit keiner Silbe darauf eingegangen.

Zitat von r.e.stahl

und will mich eher nicht mit Browser-Spezifikationen - also so etwas wie Systemprogrammierung - beschäftigen, ich habe genug Anwendungsprobleme mit meiner Website und erwarte von Browsern einheitliches Verhalten.

Du kannst erwarten, was du möchtest. Wenn solche Details eine Bedeutung für dich haben, musst du aber mit der Realität umgehen.

Zitat von r.e.stahl

Etwas verwundert über Sören Hentzschel

Worüber genau bist du verwundert? Darüber, dass ich dir eine ausführliche Erklärung auf deine Frage inklusive Lösungsansatz gegeben habe? Gern geschehen …

Zitat von r.e.stahl

Ich weiß gar nicht wo man da hinschreiben muss. Ich dachte das hier ist das Forum für solche Sachen.

Das ist ein Nutzer-helfen-Nutzer-Forum für Probleme mit Firefox. Deine Frage dreht sich erstens eher um Webentwicklung und zweitens liegt, wie bereits erklärt, kein Fehlverhalten von Firefox vor. Dennoch habe ich dir einen Lösungsansatz genannt. Mozilla musst du da nichts melden, denn nochmal: Firefox verhält sich gemäß Spezifikation korrekt und solche Mini-Abweichungen in der Darstellung, wenn es zur Rundung von Werten kommt, sind bedingt durch Unterschiede in der Architektur der Browser-Engines und daher unvermeidbar.

Das <pre> steht noch irgendwie verloren und falsch da. Alles danach wird so angezeigt, wie es im HTML geschrieben wurde. Sicher, dass so gewollt?