Internet Explorer 3px bug
Jak známo zatím stále nejrozšířenější (bohužel) prohlížeč Internet Explorer obsahuje spousty implementačních chyb. V poslední době jsem se u jednoho designu potýkal s jednou velice nehezkou chybou, kdy Internet Explorer chybně vykresluje obtékající element se stylem float:left a relativní šířkou.
Následující definice CSS demonstruje chybné vykreslení:
<html>
<head>
<title>Float IE 3px bug</title>
<style type="text/css">
#mother {
width: 20em;
}
#floated {
float: left;
height: 2em;
width: 10em;
background-color: red;
}
#content {
border: 1px solid black;
font-family : Arial, Verdana;
margin-left:10em;
background-color: #EFEFEF;
}
</style>
</head>
<body>
<div id="mother">
<div id="floated"> </div>
<div id="content">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Maecenas pharetra ultrices tellus.
Maecenas rhoncus elementum sapien.
</div>
</div>
</body>
</html>
Internet Explorer tuto stránku vykreslí chybně:
První dva řádky jsou evidentně o 3 pixely posunuty doprava. Chyba je nežádoucí a dokáže pěkně rozhodit design. Naštěstí existuje CSS hack, který tuto situaci spolehlivě vyřeší a IE stránku vykreslí bez 3 pixelové chyby.
Řešením je úprava definice CSS takto:
<html>
<head>
<title>Float IE 3px bug</title>
<style type="text/css">
#mother {
width: 20em;
}
#floated {
float: left;
height: 2em;
width: 10em;
background-color: red;
}
#content {
border: 1px solid black;
font-family : Arial, Verdana;
margin-left:10em;
background-color: #EFEFEF;
}
/* hack proti IE 3px bugu */
* html #floated {
margin-right: 0px;
}
* html #content {
height: 1%;
margin-left: 0;
}
/* konec hacku */
</style>
</head>
<body>
<div id="mother">
<div id="floated"> </div>
<div id="content">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Maecenas pharetra ultrices tellus.
Maecenas rhoncus elementum sapien.
</div>
</div>
</body>
</html>
Osobně moc CSS hacky neuznávám, protože můžou v budoucnu způsobit potíže, ale tohle je prostě momentální a hlavně funkční řešení.