kaxigt.com

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

<ul>
    <!-- First item is special -->
    <li>
        <a href="/">Start page</a>
    </li>
    <li>
        <a href="/">News</a>
    </li>
    <li>
        <a href="/">Contact</a>
    </li>
</ul>

CSS-koden

 li {
    background: red;
}
li:first-child {
    background: blue;
}

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-kommentaren 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 <!– First item is special –> 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.