Hoi,

Ik heb een probleem met de verschillen van de box model in browsers.

Als je in IE border en/of padding gebruikt beinvloed die niet de grootte van een box (oftewel <DIV STYLE="width:200px;">) maar bij Mozilla wel. IE maakt de inhoud van de box kleiner. Mozilla maakt de box zelf groter. De IE manier vind ik fijner werken tijdens het ontwerpen omdat je dan niet steeds de width hoeft aan te passen als je de border en padding verfijnt.

Als je het volgende in de stylesheet plaatst is het opgelost:

DIV
{
moz-box-sizing: border-box;
-moz-box-sizing: border-box;
}

Nu reageert Mozilla hetzelfde als IE. Toch vind ik dit niet heel netjes. Het zou mooier zijn met de juiste doctype. Ik heb de volgende drie doctypes geprobeerd, die maakten IE gelijk aan Mozilla inplaats van andersom:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">;


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">;


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">;

Weet iemand andere betere oplossingen dan de stylesheet?
XHTML strict zal een beter resultaat geven...

Reageren