Box Model Hack
Forleden var her et spørgsmål om IE's og NS's forskellige opfattelser af css boks modellen. Se: http://www.eksperten.dk/spm/260971Løsningen var bl.a. at benytte Tantek Celiks "Box Model Hack", se: http://www.tantek.com/CSS/Examples/boxmodelhack.html
Det går ud på at udnytte en anden bug i IE5 til at komme omkring den første bug med forkert opfattelse af boks modellen. Jeg har forsøgt at anvende hans kode sådan:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#nobug {
width:200px; height:100px; background-color:#ffcc00; border: 3px solid blue;
}
#bugwidth {
width:206px; voice-family:"\"}\""; voice-family:inherit; width:200px; height:100px; background-color:#ccff00; border: 3px solid blue;
}
</style>
</head>
<body style="margin:20px">
<div id="nobug"> </div>
<div id="bugwidth"> </div>
<p> </p>
<p> </p>
</body>
</html>
Dvs. lagt de 6px border til width først (det mål som IE5 skal bruge, men som er ukorrekt), derefter bug'en og derefter det korrekte mål (som IE6 følger). Det ser også OK ud i IE6 (de to bokse skal flugte horisontalt), men i IE5 (som jo var den der gerne skulle vise det korrekt) forsvinder den nederste boks simpelthen. Pist væk! Se selv her: www.dahr.dk/Web/BoxModelHack.html
Hvad har jeg misforstået?
