[CSS] CSS-Hacks: Der zoom-Hack

Und weiter geht es in der Reihe der Artikel über CSS Praxis!
Heute gibt es wieder einen CSS-Hack: den zoom-Hack, welchen ich euch gleich genauer erklären werde.

Jeder kennt die Unzulänglichkeiten des Internet Explorers. Zum Glück kann man Vieles mithilfe der Internet Explorer CSS-Weichen beheben, aber manchmal kommt es in der Engine des "Browsers" zu Render-Bugs: Elemente werden an einer falschen Position dargestellt, nur zur Hälfte dargestellt, gar nicht dargestellt oder Ähnliches.

Diese Render-Bugs kann man umgehen, indem man die Browser-Engine dazu zwingt, das betroffene Element "anders" zu rendern. Am Besten eignet sich hierfür die zoom-Definition. Die Zoom-Definition dient (überraschungsarm) zum Zoomen von Elementen im Internet Explorer und ab CSS3.
Ein Nebeneffekt der Definition ist, dass das Element im Internet Explorer die hasLayout Eigenschaft erhält, welche dem "Browser" auf mysteriöse Art und Weise mitteilt, dass dieses eine Element ein wichtiger Bestandteil des Layouts ist und er aufgrund dessen keine Render-Bugs mehr produziert. Wie das intern geregelt ist weiß niemand, aber es klappt und allein diese Tatsache reicht uns vollkommen aus.

Bei meiner Arbeit mit CSS hilft mir die zoom-Definition 90% aller Probleme im IE zu beheben! IE8 ausgeschlossen.

Hier ein Beispiel der zoom-Definition auf alle Elemente der Klasse "fixMe".

.fixMe {
    zoom: 1;
}