Chuck Norris hat ein „Sie haben gewonnen“-Banner angeklickt. Und er hat gewonnen!

2.08.09

I werd narrisch!

Ich wollte eigentlich nur ein paar em-notierte Zeilenhöhen durch die jeweiligen Prozentwerte ersetzen. Mein Köpfchen schnell eingeschaltet und zu dem Schluss gekommen, dass 1em genau 100% entsprechen sollten. Konkret wollte ich 1.02564103em in Prozente umrechnen. Die Einheiten schnell ausgetauscht und flux das Komma um zwei Stellen verschoben. Jetzt stand da 102.564103%.

Soweit so gut, die Grundrechenarten hatte ich also noch drauf. Ich glotzte dann allerdings doch ziemlich blöd, als im Opera der entsprechende Block beträchtlich kleiner wurde, nachdem ich die Seite neu geladen hatte. Wie, muss ich jetzt an meinem Augenlicht zweifeln? Gescreenshottet und im Grafikprogramm nachgemessen: der Block ist tatsächlich geschrumpft.

Im Ganzen handelte es sich um diesen Code-Schnipsel:

font-size: 200px;
line-height: 1.02564103em;

Beziehungsweise dann in Prozent:

font-size: 200px;
line-height: 102.564103%;

Die Zeilenhöhe resultierte bei erstem in 206px und bei zweitem in 204px (Opera 10.00 Beta). Das richtige Ergebnis wäre übrigens 205px, denn 200px * 1.02564103 ergibt 205.128206, da lässt sich nichts dran rütteln. Okay, dachte ich, die 10er Beta darf Fehler machen. Aber wie sieht es bei anderen Browsern aus?

Der Firefox 3.0.12 und 3.5.1 rechnete in beiden Fällen korrekt, der IE, sowohl der Sechser und Siebener, als auch der Achter, kam mit em auf 204px und mit Prozenten auf 205px. Die beiden Webkit-Browser Safari und Chrome machen es genau andersherum.

Wie lässt sich das erklären? Mich würden die zugrundeliegenden Berechnungen interessieren; wahrscheinlich runden manche Browser früher und manche erst am Schluss, manche vielleicht auch irgendwann. Oder handelt es sich dabei um ein schon bekanntes Phänomen, das nur ich mal wieder nicht mitbekommen habe und jetzt aufgeregt hüpfend von hinter dem Mond erscheine?

Dass pixelperfektes Webdesign ein utopischer Mythos ist, sollte mittlerweile in alle Köpfe eingebrannt sein, aber dass das so weit geht, dass man bei eigentlich äquivalenten Werten unterschiedliche Ergebnisse bekommt, das erschüttert mich schon ein wenig.

Kommentare [4]

Martin am 5.08.2009 um 16:16

Webkit und Opera wissen auch nicht was 30%+70% ergibt.

Jens Grochtdreis am 13.08.2009 um 09:42

Jeder Browser rechnet anders. Und Opera hat bekanntermaßen ein Problem mit Nachkommastellen. Genauer: er ignoriert sie. Offenbar ist das bei Webkit-Browsern ebenso. Deshalb kann man in Opera und Webkit-Browsern keine Drittelteilung eines Layouts vornehmen. Bei allen anderen Browesern, sogar denen aus redmond, funktioniert 33.33%.

Markus Schlegel am 13.08.2009 um 17:34

Mittlerweile finde ich relativ notierte Schriftgrößen nur noch umständlich. Wer einmal ein vertikales Typogrid penibel genau mit em zu realisieren versucht hat, wird verstehen, was ich meine.

BajK am 7.09.2009 um 03:07

Ihr habt doch echt keine Hobbys. Schreib halt 205px rein, meine Fresse o.O
Jeder moderne Browser kann auch absolute Werte stufenlos skalieren.

Kommentar verfassen

Textile-Hilfe

  • *stark*
  • _betont_
  • "Link":http://url.com/
  • bq. Zitatkasten
  • bc. Code-Block
Der Kommentar kann erst abgeschickt werden, wenn man mindestens einmal die Vorschaufunktion aktiviert hat.

Flattr

Blogrolle

Podroll

Soziale Netzwerke

Twitroll