IE-Brouci (Chyby / Bugy IE)
(na úvodní stránku)Guillotine bug
Guillotine bug je charakterizován náhodným uříznutím či objevením textu při najetí myši na odkaz.
Kde se chyba projevuje?
Internet Explorer 6
Za jakých podmínek?
Existují dva boxy – jeden obalový a druhý v něm plovoucí, který však není ukončen vlastností clear.
Obalový box obsahuje za deklarací plovoucího boxu více (alespoň 3) odkazů, které mají nadefinovánu změnu určitých vlastností (padding, background…) při najetí myši (a:hover).
V obalovém boxu máme několik odkazů, které mají nadefinovanou změnu určitých vlastností při najetí myši. Při přejetí třetího odkazu (bráno podle logické struktury dokumentu) dojde k uříznutí přetékající části plovoucího boxu na úroveň spodní hrany obalového boxu. Při přejetí prvního či druhého odkazu, potažmo libovolného odkazu v plovoucím boxu, dojde ke správnému znovupřekreslení dokumentu.
Problémový kód
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Guillotine Bug</title>
<style>
#wrap { border: 5px solid #FFBEA4; background-color: #FFEEE8; }
#box { float: left; border: 5px solid #ABD5FF; background-color: #E8F3FF; width: 100px; }
a:hover { background-position: 0 0; }
</style>
</head>
<body>
<div id="wrap">
<div id="box">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque egestas. Cras eget lacus pharetra magna imperdiet interdum. Integer cursus diam. Morbi elementum fringilla leo. Quisque ultricies aliquet leo. Cras volutpat, nibh vel ornare luctus, magna tortor commodo nulla, ac sodales turpis leo id velit. Aenean ultricies dictum neque. Aliquam ornare auctor ipsum. Maecenas eu mi.</div>
<a href="#">Odkaz 1</a><br />
<a href="#">Odkaz 2</a><br />
<a href="#">Odkaz 3</a><br />
<a href="#">Odkaz 4</a><br />
<a href="#">Odkaz 5</a>
</div>
</body>
</html>
<html>
<head>
<title>Guillotine Bug</title>
<style>
#wrap { border: 5px solid #FFBEA4; background-color: #FFEEE8; }
#box { float: left; border: 5px solid #ABD5FF; background-color: #E8F3FF; width: 100px; }
a:hover { background-position: 0 0; }
</style>
</head>
<body>
<div id="wrap">
<div id="box">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque egestas. Cras eget lacus pharetra magna imperdiet interdum. Integer cursus diam. Morbi elementum fringilla leo. Quisque ultricies aliquet leo. Cras volutpat, nibh vel ornare luctus, magna tortor commodo nulla, ac sodales turpis leo id velit. Aenean ultricies dictum neque. Aliquam ornare auctor ipsum. Maecenas eu mi.</div>
<a href="#">Odkaz 1</a><br />
<a href="#">Odkaz 2</a><br />
<a href="#">Odkaz 3</a><br />
<a href="#">Odkaz 4</a><br />
<a href="#">Odkaz 5</a>
</div>
</body>
</html>
Kód je použit na této stránce. Prohlédněte si, jak ho vykresluje Váš prohlížeč.
Správné vykreslení
Vykreslení v Internet Exploreru
Takto se plovoucí box uřízne po najetí myší na odkaz 3, 4 nebo 5.
Řešení Guillotine Bugu
Řešení je poměrně jednoduché. Spočívá v umístění prázdného divu s definovanou vlasností clear: both za obalový box. Jedná se samozřejmě o sémanticky nesprávné řešení, neboť prvek nemá v dokumentu logický význam, avšak je plně funkční a jednoduché.
V případě, že obalový box má nastavenu šířku, by toto řešení nestačilo (za podnět děkuji Leoši Ondrovi). V takovém případě musíme obsah vnějšího boxu (#wrap) uzavřít do dalšího boxu, na který aplikujeme Holly hack. Stinnou stránkou tohoto řešení je, že obalový box v takovém případě bude roztažen na výšku plovoucího. Proto se této kostrukci raději vyhněte.
Ošetřené kódy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Guillotine Bug</title>
<style>
#wrap { border: 5px solid #FFBEA4; background-color: #FFEEE8; }
#box { float: left; border: 5px solid #ABD5FF; background-color: #E8F3FF; width: 100px; }
a:hover { background-position: 0 0; }
.clear { clear: both; }
</style>
</head>
<body>
<div id="wrap">
<div id="box">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque egestas. Cras eget lacus pharetra magna imperdiet interdum. Integer cursus diam. Morbi elementum fringilla leo. Quisque ultricies aliquet leo. Cras volutpat, nibh vel ornare luctus, magna tortor commodo nulla, ac sodales turpis leo id velit. Aenean ultricies dictum neque. Aliquam ornare auctor ipsum. Maecenas eu mi.</div>
<a href="#">Odkaz 1</a><br />
<a href="#">Odkaz 2</a><br />
<a href="#">Odkaz 3</a><br />
<a href="#">Odkaz 4</a><br />
<a href="#">Odkaz 5</a>
</div>
<div class="clear"></div>
</body>
</html>
<html>
<head>
<title>Guillotine Bug</title>
<style>
#wrap { border: 5px solid #FFBEA4; background-color: #FFEEE8; }
#box { float: left; border: 5px solid #ABD5FF; background-color: #E8F3FF; width: 100px; }
a:hover { background-position: 0 0; }
.clear { clear: both; }
</style>
</head>
<body>
<div id="wrap">
<div id="box">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque egestas. Cras eget lacus pharetra magna imperdiet interdum. Integer cursus diam. Morbi elementum fringilla leo. Quisque ultricies aliquet leo. Cras volutpat, nibh vel ornare luctus, magna tortor commodo nulla, ac sodales turpis leo id velit. Aenean ultricies dictum neque. Aliquam ornare auctor ipsum. Maecenas eu mi.</div>
<a href="#">Odkaz 1</a><br />
<a href="#">Odkaz 2</a><br />
<a href="#">Odkaz 3</a><br />
<a href="#">Odkaz 4</a><br />
<a href="#">Odkaz 5</a>
</div>
<div class="clear"></div>
</body>
</html>
Ošetřený kód je na této stránce. Vyzkoušejte si, jak se zobrazuje ve Vašem prohlížeči.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Guillotine Bug</title>
<style>
#wrap { border: 5px solid #FFBEA4; background-color: #FFEEE8; width: 80%; }
#box { float: left; border: 5px solid #ABD5FF; background-color: #E8F3FF; width: 100px; }
a:hover { background-position: 0 0; }
.clear { clear: both; }
/* \*/ * html #inner-box { height: 1px; } /* */
</style>
</head>
<body>
<div id="wrap">
<div id="box">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque egestas. Cras eget lacus pharetra magna imperdiet interdum. Integer cursus diam. Morbi elementum fringilla leo. Quisque ultricies aliquet leo. Cras volutpat, nibh vel ornare luctus, magna tortor commodo nulla, ac sodales turpis leo id velit. Aenean ultricies dictum neque. Aliquam ornare auctor ipsum. Maecenas eu mi.</div>
<div id="inner-box">
<a href="#">Odkaz 1</a><br />
<a href="#">Odkaz 2</a><br />
<a href="#">Odkaz 3</a><br />
<a href="#">Odkaz 4</a><br />
<a href="#">Odkaz 5</a>
</div>
</div>
<div class="clear"></div>
</body>
</html>
<html>
<head>
<title>Guillotine Bug</title>
<style>
#wrap { border: 5px solid #FFBEA4; background-color: #FFEEE8; width: 80%; }
#box { float: left; border: 5px solid #ABD5FF; background-color: #E8F3FF; width: 100px; }
a:hover { background-position: 0 0; }
.clear { clear: both; }
/* \*/ * html #inner-box { height: 1px; } /* */
</style>
</head>
<body>
<div id="wrap">
<div id="box">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque egestas. Cras eget lacus pharetra magna imperdiet interdum. Integer cursus diam. Morbi elementum fringilla leo. Quisque ultricies aliquet leo. Cras volutpat, nibh vel ornare luctus, magna tortor commodo nulla, ac sodales turpis leo id velit. Aenean ultricies dictum neque. Aliquam ornare auctor ipsum. Maecenas eu mi.</div>
<div id="inner-box">
<a href="#">Odkaz 1</a><br />
<a href="#">Odkaz 2</a><br />
<a href="#">Odkaz 3</a><br />
<a href="#">Odkaz 4</a><br />
<a href="#">Odkaz 5</a>
</div>
</div>
<div class="clear"></div>
</body>
</html>
Ošetřený kód je na této stránce. Vyzkoušejte si, jak se zobrazuje ve Vašem prohlížeči.
Na Position Is Everything najdete článek k tomuto tématu, který zahrnuje všechna možná řešení včetně možnosti zachování sémantické korektnosti dokumentu.