IE-Brouci (Chyby / Bugy IE)
(na úvodní stránku)Missing first letter bug
Missing first letter bug se projevuje zmizením prvního písmene v boxu, ačkoliv je pro něj vyhrazeno místo.
Kde se chyba projevuje?
Za jakých podmínek?
Máme dva do sebe vnořené blokové elementy. Vlastnost position vnořeného elementu nastavíme na hodnotu relative a vlastnost letter-spacing na libovolnou hodnotu. V tomto konkrétním případě Internet Explorer 5.5 pro Windows nevykreslí první písmeno textu ve vnořeném elementu.
Problémový kód
<head>
<title>Missing First Letter Bug</title>
<style>
#wrap { font-size: 200%; background-color: #E2EFFB; }
#box { position: relative; letter-spacing: 10px; }
</style>
</head>
<body>
<div id="wrap">
<div id="box">Testování</div>
</div>
</body>
</html>
Kód výše se váže k prvnímu bodu předchozího seznamu a 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 5.5
Řešení Missing First Letter Bugu
Řešení je naštěstí velice snadné. Stačí přidat jednomu z boxů definici šířky nebo výšky (nasnadě je aplikace Holly hacku), odstranit position: relative, nastavit vnějšímu boxu horní border nebo padding a tak dále. Já jsem si jako ukázku řešení vybral použití Holly hacku.
Ošetřený kód
<head>
<title>Missing First Letter Bug</title>
<style>
#wrap { font-size: 200%; background-color: #E2EFFB; }
/* \*/ * html #wrap { height: 1px; } /* */
#box { position: relative; letter-spacing: 10px; }
</style>
</head>
<body>
<div id="wrap">
<div id="box">Testování</div>
</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.
Velmi detailní článek k tomuto bugu naleznete na webu Position Is Everything. Autoři tam rozebírají mimo jiné problém kursivou plněných boxů, které obtékají plovoucí elementy. Odkaz máte níže.