2015-10-07 7 views
5

Avendo un problema in cui aggiungendo spazi bianchi ottengo il seguente effetto di sfalsamento dell'evidenziazione. Questo comportamento è davvero previsto?Perché l'impostazione a: selettore della prima lettera con spazio bianco causa l'offset del mouse?

Questo sembra interessare Chrome/Safari

Highlighting weirdness

questione è riprodotta qui: https://jsfiddle.net/qsa99cc6/

CSS:

p:first-letter { 
    text-transform: uppercase; 
} 

HTML:

<p> 
     highlight me! this won't work because there's whitespace in the &lt;p&gt; 
</p> 

<p>highlight me! This should work because there isn't</p> 
+0

In Firefox 41 funziona correttamente, ma ho confermato il problema con Chrome. –

+0

è insolito, ma perché hai bisogno di spazi bianchi in primo luogo. Non puoi usare il padding-left? Quali sono i tuoi vincoli? – Chris

+0

Lo spazio bianco è un artefatto dal mio sistema di build. Ho risolto il problema rimuovendolo, sono solo curioso di sapere perché sta accadendo :) – Mark

risposta

1

Il suo comportamento è diverso su vari browser. Quindi potrebbe anche essere una sorta di bug nel browser. Forse quei browser identificano lo pseudo-elemento :first-letter allo stesso modo degli pseudo-elementi :before e .

+0

Uno pseudo-elemento non è non selezionabile per definizione. Gli pseudo-elementi non hanno assolutamente nulla a che fare con le selezioni. C'è anche uno pseudo-elemento * per * selezioni, che vola completamente di fronte a quella definizione. – BoltClock

+0

Capisco, ma suppongo che i browser possano identificarlo allo stesso modo degli pseudo-elementi non selezionabili. –

+1

Abbastanza corretto, la tua modifica ha senso. – BoltClock

Problemi correlati