_moz-rs-heading: problemi in Firefox quando <a> contiene elementi strutturali HTML5

Elementi in-line non possono contenere elementi block-level. Con HTML5 però è possibile superare questo limite, risparmiando codice ed ottenendo aree sensibili più estese.

<article>
   <a href="story.html">
      <img src="img/immagini.gif"/>
         <header><h1>Titolo</h1></header>
   </a>
</article>

Ufficiosamente questo comportamento è già supportato dai principali browser, con Firebug però si verificano dei problemi di visualizzazione quando l’elemento <a> contiene uno dei nuovi tag strutturali di HTML5 (ad es <header>): l’intera struttura HTML del blocco viene modificata, chiudendo anticipatamente gli elementi strutturali e spostando le <a> dentro il successivo elemento block-level. Ai tag <a> spostati viene aggiunto ed l’attributo “_moz-rs-heading”.


Una possibile via per risolvere questo problema è aggiungere un <div> dentro il tag <a> per racchiudere i contenuti. Questa soluzione effettivamente risolve il problema ma – a mio parere- vanifica la pulizia semantica che HTML5 sta sforzandosi di recuperare.
Altra soluzione potrebbe essere il ricorso a uno script JQuery ma la vedo come un’operazione macchinosa: perché gravare la mia pagina con un ulteriore script quando il problema è limitato ad un solo browser? (anche se si tratta del mio browser preferito)

Personalmente, nell’attesa della risoluzione del bug, preferisco continuare con il “vecchio sistema”.