2012-05-03 10 views
5

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:

  1. è il mio html corretto (è vero OK secondo lo standard per nidificare em-s?)
  2. se sì, allora c'è una soluzione? *
  3. è 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

+1

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? –

+0

Ci proverò, credo che dovrebbe funzionare per il 90%, poiché nei miei esempi ho usato il css che sarebbe ok – Gavriel

+0

Sì, funziona! Grazie! – Gavriel

risposta

1

vostro HTML sembra essere corretto e posso riprodurre su Chrome Canary costruire.

Una soluzione sarebbe quella di utilizzare campate: http://jsfiddle.net/PeeHaa/tCPd8/

Non so se si tratta di un problema noto, ma è possibile controllare il buglist a http://code.google.com/p/chromium/issues/list

Se avete anche Safari in esecuzione si potrebbe prova anche quel browser per vedere se si tratta di un Webkit o un bug di Chrome.

UPDATE

*) Ho questo codice in un plugin per WordPress, e molte persone con l'aggiunta di personalizzato il proprio CSS, in modo da cambiare da em a estendersi o qualsiasi altra cosa sarebbe freno i loro siti. Sto cercando una soluzione alternativa senza la necessità di cambiare il css

Non vedo alcuna possibilità poiché il browser lo rende semplicemente errato, quindi non è possibile utilizzarlo. L'unico trucco che vedo è usare javascript per sostituire il livello più alto em con uno span con lo stesso stile ad esso associato.

UPDATE2

Come James Allardice ha osservato che si potrebbe avvolgere la roba in un arco per risolvere il problema se questo è ok per il plugin.

+0

Ho aggiunto l'ultimo paragrafo alla domanda, vediamo perché sto cercando una correzione senza la necessità di cambiare css – Gavriel

+0

@Gavriel vedere la mia risposta aggiornata – PeeHaa