_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”.

   
      


   

       Torta alla ricotta con scaglie di cioccolato
   

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”.

   

Torta alla ricotta con scaglie di cioccolato