Co se děje, když IE9 jakoby neaplikuje styl?

Řešil jsem onehdá problém se špatným zobrazením jakéhosi formuláře v Internet Explorer 9. Ve všech ostatních prohlížečích včetně starších verzí IE vše vypadalo, jak mělo. Ale IE9 jakoby vůbec neaplikoval css.

Podle MIME-Handling Change: text/css (Windows) musí mít bezpodmínečně styly v HTTP hlavičce správný MIME-type Content-Type: text/css. Ale tím to nebylo, to bylo v pořádku.

Podle internet explorer 9 - CSS Style not recognized in IE9 - Stack Overflow by mohl chybu snad způsobit class container. Byl tam, přejmenoval jsem, nic se nestalo. Tím to nebylo.

Ještě zbyla možnost využít meta tagu X-UA-Compatible, ale to nebylo, s ohledem na ostatní záležitosti, možné.

Nakonec jsem se podstaty problému dopátral! Zobrazovaný HTML kód vypadal takto (takto zobrazil zdrojový kód Firefox):

Formulář v odstavci! Potěš! Však se ukončení pěkně zvýraznilo:

Firefox a Chrome si z toho přeskládal DOM takto:

Odstavec jednoduše ukončil před formulářem.

Internet Explorer 8 a 7 naopak nechal formulář v odstavci:

V obou těchto případech styly pro položky formuláře, vázané na formulář, zafungovaly.

IE9 ale obalí tag formuláře odstavce a odtrhne ho od vnitřku, v DOM je prostě vedle (fieldset není ve form, vidíte?). A tím všechny definice v css vázané na formulář nemůžou fungovat:

Řešení je prosté - dát si pozor na obalení formuláře paragrafem.

Celé toto vzniklo vložením shortcode pro formulář WordPress Form Manager ve WordPress  Přitom stačilo odstranit formátování řádku se shortcodem, WordPress by tag <P> odstranil a vše by bylo v pořádku.