Robert Nyman – How to solve :first-child CSS bug in IE 7

Denna artikel – How to solve :first-child CSS bug in IE 7 – är översatt från engelska och omarbetad med Robert Nymans tillåtelse.

Det började med att Robert höll på att skapa en top-menu och nu ville han ha några speciella effekter för vart och ett av de första list-elementen

  • medan resten skulle ha andra stilar. Eftersom det också rörde sig om ett begränsat område, och att det här inte var nödvändigt med stöd av IE 6, trodde han därför att han kunde använda en massa häftiga css-koder för att lösa detta istället för att slänga in en massa classer i html-koden. Låt oss kika på hans något förenklade exempel:

    HTML-koden

    CSS-koden

    1. li {
    2. background: red;
    3. }
    4. li:first-child {
    5. background: blue;
    6. }

    Problemet

    Det spelade ingen roll hur mycket Robert än vred och vände på koderna; :first-child CSS pseudo selector ville inte fungera i IE 7! Självfallet så gör inte Microsoft anspråk på att kunna stödja det heller. Medan Robert höll på att gå upp i små atomer försökte han trots allt komma underfund om detta bara var ännu en eländig implementation som inte skulle fungera överhuvudtaget eller om det faktiskt var så att det var något knas med hans koder.

    Lösningen!

    Efter att närapå ha slitit bort sitt skägg i vild förtvivlan slog det honom plötsligt; nyckeln var html-elementet som föregick det första LI elementet! Denna tolkas felaktigt av IE att bli det första child-elementet till UL. Till Roberts försvar så var den första html-kommentaren inte ditskriven av honom, och man kan faktiskt lägga in den någon annanstans om man vill det.

    Trots allt så är det en gräslig bug och av den anledningen vill Robert varna oss alla. Var mycket noggrann och försiktig med var du placerar dina html-kommentarer! Det finns alltid en fara med att dessa kan ställa till problem. Läs även andra bloggares åsikter om

    Författare: Lena

    Lena är en riktig web geek med sikte mot web standards. Hon har både fått utmärkelsen Årets WebQueen som att ha blivit omskriven för sina insatser på nätet. Hennes stora intresse är gränssnitt. Lena är gränssnitt- front end designer och har studerat design, gränssnitt, tillgänglighet, användbarhet och web standards på Blekinge Tekniska Högskola.