Der Internet Explorer leidet vor allem in älteren Versionen unter zahlreichen CSS-Bugs. Allerdings bietet sich durch die Kombination von Conditional Comments und Parser-Hacks die Möglichkeit, alle für ein Layout erforderlichen CSS-Hacks für alle IE-Versionen in einer Datei zu verwalten. Dazu ist es erforderlich, dass jede einzelne IE-Version gezielt angesprochen werden kann. Im folgenden Beispiel wird dies demonstriert.
Das reguläre CSS definiert eine rote Box (#modern) sowie mehrere schwarze Boxen, die die unterschiedlichen IE-Versionen symbolisieren. Über die jeweiligen CSS-Browserweichen wird die Box des regulären CSS im Internet Explorer grau geschaltet und es leuchten diejenigen IE-Boxen rot auf, deren Parser-Hacks durch die verwendte IE-Version angesprochenen werden.
Stand: 03.11.06 | Dirk Jesse [highresolution.info]
#modern { background: red; }
#ie5_mac, #ie50_win, #ie55_win, #ie60_win, #ie5all_win, #ie5_and_6_win, #ie7_win {
background: black; }
/* #### Hack for IE5/Mac #### */
/* Erst die CSS-Deklarationen für den IE/Mac */
#modern { background: gray; }
#ie50_win, #ie55_win, #ie60_win, #ie5all_win, #ie5_and_6_win, #ie7_win { background: black; }
#ie5_mac { background: red; }
/* Dann die CSS-Deklarationen für alle anderen Browser */
/* Hides from IE-mac \*/
#modern { background: red; }
#ie5_mac, #ie50_win, #ie55_win, #ie60_win, #ie5all_win, #ie5_and_6_win, #ie7_win { background: black; }
/* End hide from IE-mac */
Die nachfolgenden Parser-Hacks zur Adressierung der einzelnen IE-Versionen werden durch den Conditional Comment ausschließlich vom Internet Explorer ausgewertet. Dafür werden sechs Container definiert, für die jeweils unterschiedliche Kombinationen der Parser-Hacks Anwendung finden.
<!--[if IE]>
<style type="text/css">
#modern { background: gray; } /* Nicht-IE Browser werden bereits durch den Conditionl Comment erfasst */
/* #### Hack for IE5.0/win #### */
* html > body #ie50_win { background: red; } /* nur vom IE 5.0 erkannt, Leerzeichen beachten !!! */
/* #### Hack for IE5.5/win #### */
* html #ie55_win { background: red; } /* IE5.x und IE 6.0 */
* html #ie55_win { bac\kground: black; } /* ausschließlich IE 6.0 */
* html > body #ie55_win { background: black; } /* ausschließlich IE 5.0 */
/* #### Hack for IE5.x/win #### */
* html #ie5all_win { background: red; } /* IE 5.0 und IE 5.5 */
* html #ie5all_win { bac\kground: black; } /* ausschließlich IE 6.0 */
/* #### Hack for IE5.x und IE6/Win #### */
* html #ie5_and_6_win { background: red; } /* IE5.x und IE 6.0 */
/* #### Hack for IE6.0/Win #### */
* html #ie60_win { bac\kground: red; } /* ausschließlich IE 6.0 */
/* #### Hack for IE7/Win #### */
#ie7_win { background: red; } /* Alle IE-Versionen */
* html #ie7_win { background: black; } /* Alle IE 5.x und 6 */
</style>
<![endif]-->