CSS: geliebtes Border-Box-Modell

CSS: Border-Box-ModellJeder, dessen CSS-Definitionen nicht nur mit aktuellen Browsern (Firefox > 1.0.x und IExplorer 7) korrekt ausgegeben werden sollen steht irgendwann einmal vor dem Dilemma des Border-Box-Modells.

Genauer gesagt: er steht vor dem Problem, dass IExplorer 5.x und 6.0  das Border-Box-Modell mit Innen-/Außenabständen, Breite und Rand in Eigeninterpretation betrachten (Box Model Bug).

Solange vor allem der IExplorer 6 (laut Zugriffs-Statistik sämtlicher (Kunden-)Webseiten) nach wie vor die Nase vorn hat und CSS3 noch nicht in greifbare Nähe rückt, muß man als Web-Developer sich diesem Problem wohl oder übel stellen.

Aus diesem Grund ist bei jeder Template-Frickelei das geliebte Border-Box-Modell Grund für diverse Nervenzusammenbrüche...

Einige Grundregeln für ein identisches Aussehen eines Templates in allen Browsern habe ich heute von Marcus erfahren:

  1. Nutze, wenn möglich, für Boxen (DIV & Co.) nie feste Breiten kombiniert mit Abständen (padding /margin).
  2. Zum Zentrieren niemals fixe Abstands-Definitionen nehmen, das erfordert meistens Hacks für den IExplorer:
    margin 0 auto; /* funktioniert nur in neueren Browsern */text-align: center; /* für alle anderen */

Vor allem mit (1.) lassen sich marginale Probleme umgehen.

 

BTW, die "CSS-Spickzettel" (CSS cheat sheets) von lesliefranke.com oder www.ilovejackdaniels.com helfen auch - bei grundlegenden Problemen ;-)

gefunden bei webtagebu.ch

 

To be continued... 

Letzte Änderung amMontag, 23. September 2013

Schreibe einen Kommentar

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen zu Cookies erhalten Sie in unserer Datenschutzerklärung.