Nikdy mne nepřestaneš překvapovat…

Přesně tato věta se nesla dnes večer mým pokojem. Předskokany jí byly mnohé technicismy a vulgarismy. Adresátem pak Internet Explorer, konrétně pak verze šesté. Co mi provedl?

Představte si, že máte velmi subtilní kód, trivialitu, prostě něco, co vytváříte dnes a denně a dali byste ruku do ohně za to, že taková věc bude fungovat přesně tak, jak si usmyslíte. Máte? Výborně, teď si představte, že majoritní prohlížeč vám tento kód zmrší. Ve skutečnosti je to ještě mnohem děsivější, než si představujete.

Já jsem měl tento naprosto neškodný kód:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <title>Title</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="robots" content="index, follow" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <style type="text/css">

                a { width: 100%; border: 1px solid #ddd; padding: 5px 0; display: block; margin-bottom: 5px; }
                a:hover { background-color: #888; color: white; }

        </style>
</head>

<body>
    <a href="#">test</a>
    <a href="#">test</a>
    <a href="#">test</a>
    <a href="#">test</a>
</body>
</html>

Vím, že se mezi mými čtenáři vyskytují jak začátečníci-nadšenci, tak profíci (a třebas taky excitovaní), proto se všech ptám: kdo z vás na první pohled bez čtení dalších odstavců vidí, kde je problém, který by mohl způsobit odlišné chování Internet Exploreru při najetí myši na odkaz? Pokud se někdo takový najde, budu mu klidně celý týden říkat „šedovousý kodérský guru“.

Problém?

Ano, zde máte živou ukázku tohoto dokumentu. Přejeďte si všechny odkazy postupně ve vašem oblíbeném prohlížeči a poté v Internet Exploreru. Doufám, že nikomu z vás ke splnění předchozího požadavku nebude stačit jeden prohlížeč. Pozorujete rozdíl? Zatímco FF, Opera a další nemají nejmenší problém, Internet Explorer při přejetí třetího či čtvrtého odkazu ovlivní horní odsazení předchozího odkazu. Přesněji řečeno jej vynuluje. Proč?

Odpověď

Popravdě nemám nejmenší tušení. Řešení však je překvapivě jednoduché a zároveň nesmyslné. Stačí místo deklarace margin-bottom použít deklaraci margin-top. Tedy: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <title>Title</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="robots" content="index, follow" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <style type="text/css">

                a { width: 100%; border: 1px solid #ddd; padding: 5px 0; display: block; margin-top: 5px; }
                a:hover { background-color: #888; color: white; }

        </style>
</head>

<body>
    <a href="#">test</a>
    <a href="#">test</a>
    <a href="#">test</a>
    <a href="#">test</a>
</body>
</html>

Však se koukněte sami.

Co z toho plyne?

Tímto zápiskem jsem si jen chtěl postesknout, že svět kodéra je jedna velká džungle, kdy většinu nejzlověstnějších mokřadů tvoří Internet Explorer. Internet Explorer je také had, který vás v této džungli může uškrtit, brouk, který vás sežere nebo podezřelá květina, které se sotva dotknete a už je shnilá. Džungle by se ničit neměly, ale v tomto případě budu tvrdě prosazovat vypalování ohnivou liškou (pandy jsou chráněné) a mýcení kvalitní norskou pěveckou ocelí.

Tramvajákům taky přece nikdo nahodile nevytrhává koleje!

20. 11. 2005, 23.59 | (X)HTML, CSS, Prohlížeče.


28 komentářů k “Nikdy mne nepřestaneš překvapovat…”

  1. Jan Brašna říká:

    2. Proto jsem říkal, že do Brouků by spíš bylo potřeba přidat nesmyslné náhodné chování, než ony známé zdokumentované problémy :P

    21. 11. 2005 v 0.51

  2. Multimotyl říká:

    3. 21. 11. 2005 v 4.43

  3. SuE říká:

    4. hehe, mě překvapuje, že tě to překvapuje :-) něco podobného jsem řešila včera a (asi) pomohlo nastavení width nadřízenému divu(natvrdo v px) – já jsem to tam původně měla, pak jsem to zrušila a začalo to blbnout, a tak jsem to zas vrátila, a su z toho zmatená jak lesní včela v paneláku :-)

    21. 11. 2005 v 13.33

  4. whitwa říká:

    5. Tak presne s timhle jsem se setkal pri tvobe sveho blogu, presneji v tech odkazech na bocich (ktegorie, archiv,…), a presne takto jsem to pozdeji spravil .. zajimave .. tehdy jsme se taky nad tim s jobem divili. Stejne tak jsem vcera narazil na zajimavou interpretaci vlastnosti top u atributu background u opery pri vyssich rozlisenich…

    21. 11. 2005 v 13.42

  5. Jódlující bernardýn říká:

    6. Whitwa: No jo, my se divíme dost často. Někdy v budoucnu by mohla o našem lamentování nad JESPRem vyjít kniha…

    21. 11. 2005 v 14.05

  6. klokyn říká:

    7. Óóó, to je perfektná chyba. Tak krásne zmätie začiatočníkov. Dúfam že raz IE ovládne celý svet !!! :-)

    Dero takéto chyby veru zapisuj častejšie…

    21. 11. 2005 v 16.55

  7. Ivorius říká:

    8. 21. 11. 2005 v 18.06

  8. soundake říká:

    9. No, tomu říkám bug :) Nejděsivější na tom je, že řešení je tak nechutně jednoduché :/

    21. 11. 2005 v 19.32

  9. Huggi říká:

    10. myslim ze sem s tim mel taky problem..ale resil sm to jinak…//funguje i na tomhle pripade// staci v hoveru zopakovat padding

    /a:hover { background-color: #888; color: white; padding: 5px 0;}/ afunguje to dobre vsude :)

    21. 11. 2005 v 19.43

  10. walecnik říká:

    11. nebo stačí jen smazat width: 100%;

    v ie se to pak chová stejně jako ve ff. navíc už jen to, že prvek má display: block zajistí roztáhnutí – width: 100% tím pádem není třeba.

    toť moje řešení, ale nevim jestli to nebude házet pozadavky na width na validátoru. zkuste to

    21. 11. 2005 v 20.34

  11. Ošklivý sup říká:

    12. Jo, tak to je moc pěknej příklad. Mě třeba udiveju chování IE, kdy se tvoří menu s LI A a IE je všechny nesmyslně natáhne na výšku. Problém řeší border-bottom :) Ani nevím jestli je tohle nejaký známy bug nebo ne,…

    21. 11. 2005 v 20.49

  12. Ikrk říká:

    13. osobně se mi to taky stalo… vyřešil jsem to takto: * {margin: 0; padding: 0;}

    21. 11. 2005 v 22.09

  13. Ikrk říká:

    14. heh, tak sry, jsem to nakonec zkusil a tady to nějak nefachá ;) ale před tím mi to fungovalo…

    21. 11. 2005 v 22.12

  14. Vojtěch Bulant říká:

    15. 22. 11. 2005 v 17.05

  15. Dero říká:

    16. Vojtěch: Ano, se sdruženými zápisy (pokud deklaruji pouze jednu hodnotu) mám také své zkušenosti. Problémové jsou pravý a dolní margin, takovému zápisu je nejlépe se vyhnout.

    22. 11. 2005 v 17.39

  16. Jan Brašna říká:

    17. [7] Mimochodem jednou by mě zajímalo, jakou konkrétní implementaci generátoru šumu vývojáři IE použili pro jejich renderovací engine :)

    [5] Nebo to budeme jednou vyprávět dětem ;)

    23. 11. 2005 v 19.52

  17. Patrik říká:

    18. A jejda, moje oblíbená chybka:-)) Co já se s ní natrápil než jsem na to přišel.-))

    20. 12. 2005 v 15.53

  18. cheap products říká:

    19. fdsafd f china wholesale distributor We sell bulk wholesale

    14. 11. 2009 v 4.46

  19. gege říká:

    20. grtezumba dvd wholesalesdf wholesale bootssdf wholesale nfl

    1. 3. 2010 v 10.11

  20. sdf říká:

    21. werrwholesale MAC Foundation</br> zumba dvd wholesale</br>werwer wholesale boots</br>we43rwe

    3. 3. 2010 v 9.15

  21. hollister uk říká:

    22. hollister ukthank you

    26. 7. 2010 v 10.47

  22. UGG Classic Tall Boots říká:

    23. [url=http://www.uggboots5815.com]UGG Boots,UGG Classic Boots[/url] [url=http://www.uggboots5815.com]UGG Classic Boots,UGG Classic Tall Boots[/url]

    27. 7. 2010 v 9.58

  23. abercrombie říká:

    24. It's always nice when you can not only be informed, but also engaged! abercrombie fitch

    30. 7. 2010 v 15.40

  24. tiffany online říká:

    25. Well said, such a person should be a good sentenceed eyebrow with this as welltiffany outletmjijsdf n isdufhbxv nmnz

    2. 8. 2010 v 10.56

  25. best replica watches říká:

    26. good articles!!

    Cartier Replica

    8. 8. 2010 v 17.42

  26. Wholesale accessories říká:

    27. Good,it is great to see that there is a wide range of cheap tattoo kits available in many online stores as China Wholesalewell as local streets. However, if you are looking forward to bag some latest tattoo kits via internet.

    9. 8. 2010 v 2.41

  27. Wholesale Accessories říká:

    28. Good,it is Kawasaki ZX 6 R/636 great to see that there is a wide range of cheap tattoo kits available in Yamaha YZF600 R Thundercatmany online stores as as local streets. However

    24. 8. 2010 v 10.39

  28. UGG Boots říká:

    29. Good,it is ugg 5803great to see that there is aUGG Boots Classic wide range of cheap tattoo kits available in many online stores as asUGG Classic Paisley Boots local streets.

    7. 9. 2010 v 10.45

Zanechte komentář





Můžete použít Texy! formátování.
Pokud se obsah boxů níže mění, zatímco píšete, potom žádné číslice nevyplňujte. V takovém případě antispam funguje, pouze se prohlížeči nepovedlo skrýt tento box.