dobbelt margin på floatede block elementer i IE?
HejJeg har kæmpet med en lille 'spøjs' bug i Explorer, som jeg nu endelig har haft tid til at lokalisere endeligt.
Det går ud på, at hvis man floater et blockelement, som enten er blokket vha display:block; eller som naturligt er et blockelement (fx. div), og samtidig har en margin på, så bliver denne margin dobbelt så stor i IE. Er det en bug, der er andre, der har stødt på - og som måske har en workaround på?
Der findes jo diverse css hacks, som man kan neutralisere den med, men hvis der bare lige er en anden måde at strukturere sin css på, så man slipper for browserspecifikke hacks, ville det jo være klart fedest...
Nedenfor har jeg indsat mit testdokument - prøv at åbne det i hhv. explorer og firefox. Den margin, der er i venstre side for elementerne, er dobbelt så stor som i firefox...
Que?
Gode bud er yderst velkomne.... :o)
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html, body {
margin:0px;
padding:0px;
border:0px;
}
ul {
margin:0px;
padding:0px;
list-style:none;
}
ul li {
display:block;
float:left;
width:75px;
height:21px;
background:red;
margin:10px 10px 0px 10px;
text-align:center;
}
a {
display:block;
float:left;
width:75px;
height:21px;
background:lime;
margin:10px 10px 0px 10px;
text-align:center;
}
span {
display:block;
float:left;
width:75px;
height:21px;
background:blue;
margin:10px 10px 0px 10px;
text-align:center;
}
div.test {
float:left;
width:75px;
height:21px;
background:green;
margin:10px 10px 0px 10px;
text-align:center;
}
.clear {
height:0px;
overflow:hidden;
clear:both;
}
</style>
</head>
<body>
<ul>
<li>bum</li>
<li>bum</li>
</ul>
<div class="clear"></div>
<a href="#">bum</a>
<a href="#">bum</a>
<div class="clear"></div>
<span>bum</span>
<span>bum</span>
<div class="clear"></div>
<div class="test">bum</div>
<div class="test">bum</div>
</body>
</html>
