Darstellungsunterschiede in Firefox, IE 7 & IE 6 ohne Browserhacks

Normalerweise muss man bei der Umsetzung eines komplexeren Designs in HTML Browserhacks verwenden, da es sonst nicht überall gleich dargestellt wird. Der Internet Explorer 6 hat komplett seine eigenen Gedanken, wie z.B. beim padding wo man die Werte nicht von der Breite/Höhe abziehen kann. Und der Internet Explorer 7 hat z.B. bei einer ul-Liste nicht die gleiche Ausrichtung, wenn man die margin-Werte ändert. Da muss man immer noch selber Hand anlegen. Doch es gibt Abhilfe, außer den Browserhacks. Es gibt den _ für den Internet Explorer 6 und den . für den Internet Explorer 7.

#box{
        height: 200px;
        .height: 300px; /* IE 7 */
        _height: 400px; /* IE 6 */
        width: 200px;
        border: 1px dashed #000000;

}

Guckt euch diese Seite einfach mal an, und ruft ihn im Firefox, im Internet Explorer 7 und Internet Explorer 6 auf. Fällt was auf? Guckt euch den Quellcode für ein komplett Beispiel an.

So bekommen alle Internet Explorer 7 User eine Höhe von 300px, alle Internet Explorer 6 User eine Höhe von 400px und alle anderen, eine Höhe von 200px.
Was auch noch zu erwähnen ist, ist, dass man, wenn man für den Internet Explorer 7 und 6 eine Angabe macht, zuerst die für den Internet Explorer 7 machen muss, da diese sonst die vom Internet Explorer 6 überschreibt.

Aber Achtung: Dies führt zu einer Invalidität des CSS-Codes. Aber wem das egal ist, der soll diese Methode ruhig nutzen