madr.se

Detta är ett arkiverat inlägg, som importerats hit för referens. Det kan se konstigt ut och innehålla utdaterad information eller inaktuella åsikter.

Internet Explorer 7 ignorerar CSS på form labels utifrån for-attribut

IE7 är bättre än IE6. Inget att bestrida där. Men det finns alldeles för många brister också i denna webbläsare. Jag upptäckte alldeles nyligen en för mig tidigare okänd avvikelse.

En av de största nyheterna med IE7 var fullt stöd för selektor-API:et upp till CSS2.1. Det skulle i IE7 gå att skiva CSS utifrån bland annat attributselektorer enligt nedan.

a[lang=eng] {
 background: url(/images/english.png) no-repeat 0 0;
}

a[rel=external] {
 background: url(/images/openInNewWindow.png) no-repeat 0 0; 
}

div[title] {
 cursor: help; 
}

Det är en av de egenskaper som dessutom uppmuntrar döden till IE6 då det i teorin gör livet enklare för oss som författar CSS.

Dessvärre glömde IETeamet att skriva in stöd för label[for], som nedanstående bilder visar.

Felet uppspelar sig i såväl IE7 som IE8 i kompabilitetsläge. Att tillföra enkelciterings-tecken eller citeringstecken hjälper inte. Det här ställer till det för styling av formulär då classitis behövs för att särskilja labels från varandra, antingen via en klass på omslutande element eller på label-elementet självt.

Felet är åtgärdat i IE8 i (super)standardsläget. Vi får således bidavår tid och hoppas på att även IE7 uppgraderas snart. IE7nomore någon?

Uppdatering: Tydligen går det att komma runt det här genom att istället använda htmlFor.

label[for],
label[for=test] { 
 color: red; 
}

/*

Läs mer om detta i CSS Attribute selectors for label "for" attribute and IE7. Lösningen validerar och kan alltså ligga tillsammans med övrig CSS, men jag uppmuntrar likväl alla att lägga sånt här strunt (verkligen, det är strunt) i en egen fil som inkluderas med CC.