michaah: (1) whitespace im Quelltext verändert Rendering; (2) box höher als img.

Beitrag lesen

problematische Seite

Bitte im FF-inspector in irgend einem emulierten Smartphone anschauen (weil es sonst (A) wegen der Größe nervt, (B) nur der FF, nicht aber der Chomium den Fehler mit einem "#text x * y" unter bestimmten Umständen kennzeichnet.)

Bei meiner Suche nach der Ursache für unterschiedliche Abstände bin ich heute auf zwei unterschiedliche Ursachen gestoßen, die augenscheinlich nichts miteinander zu tun haben.

Mir ist schon klar, dass Text nun mal angezeigt wird, aber diese Auswirkung hat mich doch überrascht:

8 blaue Quadrate:

Die erste Unstimmigkeit betrifft einen horizontalen Zusatzabstand:

Die obersten zwei Quadrate sind 49% breit und passen nebeneinander, 50% klappt nicht nebeneinander(siehe die nächsten 2 blauen Quadrate), sondern sie werden untereinander angeordnet. Rundungsfehler .... dachte ich. (Ist es aber nicht).

Die zwei Quadrate 5 und 6 haben den exakt gleichen Quellcode mit der einzigen Ausnahme des " " (vergl. Zeilen 68 und 75). Dieser Whitespace verhindert das nebeneinander platzieren der Bilder, kein Rundungsfehler.

Im FF inspektor wird dies aber nur im Fall der obersten beiden Quadrate angezeigt wenn es diesen " " gibt (wenn man den whitespace auch hier herauslöscht wird natürlich dieser Zusatzabstand im FF inspector nicht angezeigt, er ist aber da, wie das Beispiel mit 50% Bildbreite zeigt. Nur wird es in diesem Beispiel dann nicht einmal mehr angezeigt!

Die letzten beiden Quadrate geliche Quellcode wie die ersten beiden, ur Leerzeichen durch Zeilenumbruch ersetzt.

Muss man also Quellcode unleserlich zusammenquetschen um diesen Fehler zu vermeiden? Wie kann man denn dann html strukturieren? Vermutlich muß man damit leben ... aber nervig ist das schon.

Die zweite Unstimmigkeit betrifft einen vertikalen Zusatzabstand:

Ganz einfache Frage: Warum ist das aside Element höher als breit, wo doch der Inhalt quadratisch ist (siehe weißen Balken unter blauem img)? Ich hatte schon befürchtet dass das nun auch irgend ein whitespace ist, aber ich konnte das durch Zusammenziehen des codes nicht eliminieren. Läßt sich das verhindern?

Bei Desktopversionen einer Webseite mag das alles vernachlässigbar sein, in Smartphone viewports nervt das aber schon wenn Abstände leicht, aber erkennbar unterschiedlich sind obwohl sei es nicht sein sollten. Das war ja auch der Grund meiner Suche ...

Gruß

Michael