Il codice è anche qui: http://jsfiddle.net/wMfMT/5/html em analisi bug in cromo
Questa semplice blocco di HTML:
<div>
<em><em><em><em><a href="#">fifth</a></em></em></em></em>
<em><em><em><a href="#">fourth</a></em></em></em>
<em><em><a href="#">third</a></em></em>
<em><a href="#">second</a></em>
<a href="#">first</a>
</div>
e questo css:
em {font-size:1.2em}
rende correttamente su Firefox (ogni parola è di dimensioni diverse), ma erroneamente su Chrome (il quinto e il quarto hanno le stesse dimensioni). Per prima cosa ho pensato che è un problema di CSS, ma poi ho controllato il codice html e si è scoperto che Chrome lo rendeva simile al seguente:
<div>
<em>
<em>
<em>
<em>
<a href="#">fifth</a>
</em>
</em>
</em>
<!-- /em missing -->
<em>
<em>
<em>
<a href="#">fourth</a>
</em>
</em>
</em>
<em>
<em>
<a href="#">third</a>
</em>
</em>
<em>
<a href="#">second</a>
</em>
<a href="#">first</a>
</em><!-- this is the lost /em -->
</div>
Le mie domande sono:
- è il mio html corretto (è vero OK secondo lo standard per nidificare em-s?)
- se sì, allora c'è una soluzione? *
- è un bug noto e, in caso contrario, dove dovrei segnalarlo?
*) Ho questo codice in un plug-in WordPress e molte persone lo hanno personalizzato aggiungendo il proprio css, quindi il passaggio da em a span o qualsiasi altra cosa avrebbe frenato i loro siti. Sto cercando una soluzione, senza la necessità di cambiare il CSS
Aggiunto bugreport a: http://code.google.com/p/chromium/issues/detail?id=126096
Sembra risolvere il problema se si avvolge l'intero insieme di "quinti" elementi 'em' in un' intervallo "] (http://jsfiddle.net/wMfMT/6/). È un cambiamento accettabile, o questo potrebbe avere un impatto anche sui tuoi utenti? –
Ci proverò, credo che dovrebbe funzionare per il 90%, poiché nei miei esempi ho usato il css che sarebbe ok – Gavriel
Sì, funziona! Grazie! – Gavriel