IE7 bug: Mizející obsah (Zmizík)

Předem bych chtěl podotknout, že dění kolem Internet Exploreru 7 nijak výrazně nesleduji. Zajímat mne bude až finální verze. Proto je možné, že informace, které vám tu dnes bez pompy představím, pro vás nebudou ničím novým – i přesto to risknu.

Když text chybí v IE7, řádí Zmizík

Při testování vykreslovacího jádra IE7: Release Candidate 1 se v jednom mém projektu vyskytla závažná chyba, na stránce chyběly celé bloky obsahu. Zaradoval jsem se, že moje oblíbená chyba jménem peek-a-boo přežila radikální řez programátorů Microsoftu, a pustil jsem se do zkoumání. Výsledkem byl na dřeň ořezaný kód, který odhalil závažnou chybu vykreslovacího jádra.

Dost keců, ukaž kód

Prosím, máte jej mít:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title>Validní HTML4, standardní mód, IE7 laškuje</title>
<style type="text/css">
  div { position: relative; }
  p   { float: left; }
  hr  { clear: both; }
</style>
Obsah před inkriminovaným boxem.
<div>
  <p>Tento text není v IE7: RC1 vidět. Mrzí mě to.</p>
  <hr>
</div>
Obsah za inkriminovaným boxem.

Kdy se chyba projeví

  • V Internet Exploreru 7: RC1, a to pouze ve standardním módu
  • Máte relativně pozicovaný blok (A), který nemá určené rozměry a který neplave
  • V bloku A se nachází plovoucí obsah, který je vyclearovaný pomocí vodorovné čáry (HR)
  • Při dodržení výše uvedených podmínek se v IE7 obsah bloku A nezobrazí, ačkoliv je pro něj vyhrazeno místo!

Jak na Zmizíka?

Řešení je naštěstí velmi jednoduché a bezpečné. Vychází ze stařičkého Holly hacku, který řešil tucty vykreslovacích chyb IE5 a IE6 a který spočíval v bezpečném nastavení alespoň jednoho rozměru pro obalový prvek, často height: 1px, protože s height starší verze Exploreru pracovaly stejně jako s min-height.

Vzhledem k tomu, že IE7 již min-height (i min-width) umí, byla to první vlastnost, kterou jsem se pokusil chybu vyřešit. A podařilo se. Sláva!

Výsledný kód tedy vypadá takto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title>Validní HTML4, standardní mód, IE7 laškuje</title>
<style type="text/css">
  div { position: relative; min-height: 1px; }
  p   { float: left; }
  hr  { clear: both; }
</style>
Obsah před inkriminovaným boxem.
<div>
  <p>Tento text už je v IE7: RC1 vidět.</p>
  <hr>
</div>
Obsah za inkriminovaným boxem.

S relativním pozicováním na štíru

Zmizík není jediný problém, na který jsem při testování narazil. IE7 stránky vykresluje dobře, současnou verzi bych stavěl na roveň Opery 7.5, která byla také prvním prohlížečem své řady, u které se na vykreslení podle CSS2 dalo a dá jakž takž spolehnout. Stejně jako zmiňovaná postarší Opera však i IE7: RC1 trpí drobnými chybami, které v případě Exploreru postihují zejména relativně pozicované boxy. Další drobné nedostatky má IE7 v dědičnosti.

O tom však třeba zase někdy příště.

7. 9. 2006, 21.20 | (X)HTML, CSS, Prohlížeče.


39 komentářů k “IE7 bug: Mizející obsah (Zmizík)”

  1. gwh říká:
  2. Jsi tedy pravděpodobně objevitel. Mohl bys bug nějak pojmenovat. Navrhuji peek-a-poop. :o) Ani mě to nestálo mnoho úsilí, jen pár chvil se seznamáckým slovníkem.


  3. gwh říká:
  4. Stydím se, přehlédl jsem české pojmenování.


  5. noname říká:
  6. a když se to bude clearovat pomocí něčeho jiného než hr?


  7. Meldo říká:
  8. Pekný článoček. Určite o IE 7 napiš ešte viac.


  9. Dero říká:
  10. [5] Nemůže. A co víc, ta ukázka je plně validní, uvozovky nejsou na místě. Ověř si to ve specifikaci.


  11. marinak říká:
  12. Ja se IE 7 bojim uz ted :o)


  13. brm říká:
  14. nemam rad IE7 :)


  15. Tomas říká:
  16. Chyba ostala aj vo finalnej verzii – nahodou som narazil na tento clanok a po prepnuti do IETab mi zmizol prostredny riadok…


  17. Shaman říká:
  18. Děkuji, zachránil jsi mi nejméně 15 minut experimentování.

    Zajímavá je kombinace jqueryovských ui.tabs a IE7 – při načtení stránky s taby se obsah defaultního tabu nezobrazí, při kliknutí na jiné taby nebo zpátky na defaltní už ano :-)

    Min-height problém zprovodil ze světa.


  19. Rape říká:
  20. Já mám, řekl bych, mnohem větší problém :-( Mizí mi pozadí a stránka se zarovná doleva. Když ovšem stránku reloadnu, tak problém zmizí… Už jsem to řešil s mnoha odborníky, ale nikdo si s tím neví rady! Zkuste si otevřít http://crackers.cz a rozkliknout jakýkoli článek. Budu rád za jakýkoli názor, díky!!


  21. aion kinah říká:
  22. aion gold Japanese Buy wow gold frigate hit cheap wow gold


  23. aion kinah říká:
  24. cheap wow gold buy cheap wow gold


  25. fsd říká:
  26. zumba dvd wholesale wholesale bootssdf wholesale nfl


  27. sdf říká:
  28. sdfsdwholesale MAC Makeup Brushes</br> dsffwholesale MAC Eyeliner</br> holesale MAC Lip gloss</br> sdfd


  29. Dropship říká:
  30. Gold Mine Bar Products Fever Theme
    good post,i like it .


  31. Dollar Items říká:
  32. Good articles ! I like it! Alloying earring sets Alloying golden chain neclace Alloying golden jewelry


  33. lady bags říká:
  34. diaper bags handbags lady bags golf bags


  35. replica watches říká:
  36. cheap replica watches
    replica Rolex Prince
    A.Lange & Sohne watch for sale<BR


  37. Fashion Review Today říká:
  38. Fashion Jewelry support and safety.FDGFGDFG


  39. shox r4 říká:
  40. shoes:nike shoes, air jordan series,air force one,air max,nikeshox,dunk,kobe,gucci,bape,puma,adidas,timberland,prada,James,Icecream,etctimberland boots for men air yeezy shoes cheap air force ones men

    handbags:lv,gucci,chanel,prada,chloe,DG,juicy,hermes,balenciaga,tous,mulberry,christian dior,etc colthes/jeans:bape,bbc,Polo,lacoste,evisu,Baby,A&f,ed-hardy,lrg,hoodies,etc


  41. jordan shoes říká:
  42. Zajímavá je kombinace jqueryovských ui.tabs a IE7 – při načtení stránky s taby se obsah defaultního tabu nezobrazí, kappa jacket kappa jackets aka stash house jeanspři kliknutí na jiné taby nebo zpátky na defaltní už ano


  43. jersey říká:
  44. pro vás nebudou ničím novým – i přesto to risknu.


  45. metin2 yang říká:
  46. metin2 yang


  47. wow gold říká:
  48. wow gold


  49. ugg boots sale říká:
  50. really love your website,I really love your website, it's so useful, i'm just sharing for my friends!Strong winter weather is hitting most of the United States right now. Many of the states that are not used to seeing even the slightest amount of snow, are being bombarded with strong winter weather. If you want to keep warm in this winter you might try adding some boots to your inventory likeUGG boots on sale,ugg boots,ugg boots sale.


  51. Replica Handbags říká:
  52. or design handbags. and other as Replica Louis Vuitton Handbags


  53. gucci říká:
  54. Thank you .gucci bags sale gucci gucci handbags cheap gucci bags


  55. dsfds říká:
  56. Louboutin Boots


  57. johnhand říká:
  58. Tom Penny and Antwian Dixon. Apart from a large fan base compromising skateboarders, supra vaider high tophas also aught the attention of the music industries big names such as Jay-Z, Justin Timberlake and Lil Wayne. supra vaider black high boots, it is the main creative recreation sneakers
    teal we push in our online shop these days.


  59. johnhand říká:
  60. Check out our new models, you can have your own Timberland boots mailed right to your door a few seconds from now. What are you waiting for? timberland boots uk.
    timberland boots were created closely and carefully designed to provide its wearer with comfort and protection necessary for outdoor activities.they continuetimberland Shoes to adjust how and with what materials boots are made.


  61. Express Life říká:
  62. Fantastic site, where did you come up with the information in this piece of content? I’m happy I found it though, ill be checking back soon to see what other articles you have.Cocktail Shakers Bar Cocktail Shakers Bottle Openers Bar Mats


  63. sdfsd říká:
  64. gucci bags


  65. jewellery earrings říká:
  66. good


  67. hollister uk říká:
  68. hollister uk


  69. UGG Classic Tall Boots říká:
  70. [url=http://www.uggboots5815.com]UGG Classic Boots,UGG Classic Tall Boots[/url]


  71. Baby Carriers říká:
  72. animal shaped rubber bands


  73. loewe handbags říká:
  74. loewe handbags is made with superior craftsmanship which is so well loved by all handbag fans.Get yourself sparking with loewe bagswelcome to enjoy loewe handbags for free shipping.top quality loewe bags for discerning ladies.discount and cheap loewe handbags on line


  75. UGG Classic Tall Boots říká:
  76. http://uggboots5815.com http://uggboots5815.com


  77. Wholesale accessories říká:
  78. For people quite serious in making China Wholesalesome good money by getting started with tattoo business, Wholesale Accessoriesgiven below are few valuable tips to consider.


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.