Background in fieldset+legend su IE

Eccoci di fronte a uno degli ennesimi problemi di rendering su IE.

Creare un fieldset, con all'interno un tag legend, e assegnarli un background fa si che quest'ultimo venga rappresentato non all'interno del fieldset, bensì "sbordi" in alto dove è presente il tag legend.

Il problema è presente su tutte le versioni di IE, fino alla 8.

In pratica con un HTML di questo tipo:

<fieldset>
<legend>Name</legend>
...
</fieldset>

Si ottiene questo risultato:

La soluzione consiste nell'apportare queste modifiche al CSS:

fieldset {
position: relative;
}
legend {
position: absolute;
top: -.5em;
left: .2em;
}

Apportare queste modifiche come al solito provoca alcuni problemi di visualizzazione in altri browser.

Per questo motivo per IE6 si puo' utilizzare l'Holly Hack (usando "* html fieldset" e "* html legend" come selettori), per IE7 e IE8 invece occorre usare i commenti condizionali.

In pratica, cosi':

<!--[if IE]>
<! 
fieldset {
position: relative;
}
legend {
position: absolute;
top: -.5em;
left: .2em;
}
-->
<!--[endif]-->

Da notare che i problemi relativi all'uso di fieldset+legend non si esauriscono qui su IE. In generale il rendering del legend all'interno del fieldset risulta piuttosto "stravagante", tanto che mettere un display: none nel legend fa scomparire tutto il fieldset!

Sembra che una ulteriore soluzione sia inserire il contenuto del legend in un tag <span>.

La cosa comunque non è stata verificata.

Altre informazioni qui:

http://www.communitymx.com/content/article.cfm?cid=DD9F3