CODEWITHSUNDEEP
htmlcssbrowser
Joseph Reeve
Joseph Reeve

Reputation: 480

Inconsistent CSS "invalid property value" in Chrome

There is a typo in some HTML I'm re-using dynamically (so I can't edit the source): https://it.wiktionary.org/wiki/Template:Pagina_principale/Testata2

The HTML is:

<div
    style="border:1px solid #ABCDEF; text-align:center; background-color:#f0f4ff;-moz-border-radius-topleft:1.5em; -moz-border-radius-bottomleft:1.5em;">
    <div style="padding:.8em">
        <h1 style="border:0; padding:0; margin:0; display:inline; font-size:250"><span class="mw-headline"
                id="Benvenuti_nel_Wikizionario"><span style="font-size:135%"><b><a href="/wiki/Aiuto:Benvenuto"
                            title="Aiuto:Benvenuto">Benvenuti nel</a> <a href="/wiki/Wikizionario"
                            title="Wikizionario">Wikizionario</a></b></span></span></h1><br><br><big>il <a
                href="/wiki/dizionario" title="dizionario">dizionario</a> multilingue <a
                href="/wiki/Aiuto:Cosa_vuol_dire_%22libero%22%3F"
                title="Aiuto:Cosa vuol dire &quot;libero&quot;?">libero</a>, in stile <a href="/wiki/wiki"
                title="wiki">wiki</a>!</big>
        <hr>
        <p><b>Oggi è martedì 11 giugno 2019 e al momento abbiamo <a href="/wiki/Speciale:TutteLePagine"
                    title="Speciale:TutteLePagine"><span style="font-size:105%;">465&nbsp;594</span> lemmi</a> e <a
                    href="/wiki/Speciale:Utenti" title="Speciale:Utenti"><span
                        style="font-size:105%;">70&nbsp;103</span> utenti</a>.</b>
        </p>
    </div>
</div>

The h1 has an invalid inline style: font-size:250. As one might expect, Chrome ignores the invalid property and continues: invalid property ignored

Weirdly, when I use the HTML separately (e.g. copy-paste the above into an html file), Chrome parses and treats the invalid value as a pixel value.

My goal is to render the HTML as similarly to the original as possible, so rather than fix the source, I'd like to make my renderer behave the same way.

Is there some CSS "Strict Mode" I've never come across? What could cause Chrome to apply this property on one page but not another?

(source GitHub issue: https://github.com/openzim/mwoffliner/issues/717)

Upvotes: 0

Views: 2619

Answers (1)

Quentin
Quentin

Reputation: 944170

Is there some CSS "Strict Mode" I've never come across?

Yes.

Documents missing the doctype declaration are rendered in Quirks Mode which emulates a lot of bugs that appeared in ~IE5 including treating a number as a pixel length (the CSS specification says that font-size: 250 is invalid and must be ignored).

Upvotes: 1

Related Questions