Er flere gange i forbindelse med vedligeholdelse og udvikling af Statsbibliotekets s\u00f8gesider l\u00f8bet ind i problemer med at slutningen af en tekst helt umotiveret\u00a0 er blevet gentaget i Internet Explorer.<\/p>\n
F\u00f8rste gang blev buggen l\u00f8st af en kollega, som siden glemte, hvad hans l\u00f8sning var. S\u00e5 da buggen dukkede op igen, m\u00e5tte vi starte forfra. Forrige gang fik jeg aldrig ram p\u00e5 buggen, og da tekstgentagelserne kun optr\u00e5dte i IE6 under helt bestemte forhold blev problemet\u00a0 tilsidesat.<\/p>\n
I dag dukkede buggen s\u00e5 op igen, i forbindelse med flytningen af et tekst element. Denne gang i IE7 hvor de sidste 3 characters i en bestemt streng blev gentaget uden for flowet og samtidig forstyrrede det \u00f8vrige flow p\u00e5 siden. Den gentagne tekst var kun synlig i visse situationer (helt konkret n\u00e5r man for s\u00f8gte at se sin kurv, uden at der var andet indhold mellem kurven og sidens footer), men til geng\u00e6ld fuldst\u00e6ndig konsistent i disse tilf\u00e6lde.<\/p>\n
En hurtig s\u00f8gning afsl\u00f8rede at buggen kaldes ghost bug p\u00e5 engelsk. Der var dog mindre enighed, om hvordan ghost buggen fikses.\u00a0 Her er et par af de n\u00e6vnte forslag:<\/p>\n
Ingen af disse forslag l\u00f8ste dog vores ghost bug.<\/p>\n
Mange af IE bugs skyldes eller fremprovokeres af brug af floats, s\u00e5 den l\u00f8sning l\u00e5 jo lige for. Desv\u00e6rre hjalp det ikke at fjerne floats p\u00e5 hverken elementet eller parent elementer, der ogs\u00e5 havde floats. N\u00e6ste fors\u00f8g gik s\u00e5 p\u00e5 at se p\u00e5 b\u00e5de floats og widts i for\u00e6ldre elementerne. Og her dukkede l\u00f8sningen op. Et div element 2 niveauer oppe havde en float left kombineret med en width p\u00e5 100%. Ved at neds\u00e6tte width p\u00e5 dette element til 99.8% fik jeg has p\u00e5 ghost buggen.<\/p>\n
Det kan synes ulogisk at vi f\u00f8rst floater elementer for bagefter at give dem en width p\u00e5 100%. Det skyldes, at hvis du har mange floatede div elementer inden i hinanden, og f.eks. kun den inderste div indeholder tekst. S\u00e5 vil den yderste div ikke have samme h\u00f8jde som det indhold der vises p\u00e5 sk\u00e6rmen. Popul\u00e6rt sagt s\u00e5 kollapser div-tagget. Dette giver problemer med f.eks. margin-top\/padding-top p\u00e5 de efterf\u00f8lgende elementer selv om man har clearet den ovenst\u00e5ende blok. Men det var et sidespring.<\/p>\n
M\u00f8dte endnu en ghostbug og fandt derfor et par nye metoder til at undg\u00e5 at div’er der indeholder floatede div’er kollapser, hvis ikke parent div-tagget ikke ogs\u00e5 er floatet.<\/p>\n
Man kan f.eks. give det kollapsede parent div-tag en overflow: auto eller hidden. Eller man kan give det en display:table.<\/p>\n