Si verifica un problema per cui l'attributo text-decoration non funziona con la specifica first-letter.: supporto browser text-decoration per la prima lettera

In questo esempio lo scopo del codice è di impostare la prima lettera di ogni blocco <div class="content">.

div.content:first-letter { 
    text-decoration: underline; 
    color: #bd00df; 
}

La prima lettera di ogni <div class="content"> blocco fa girare viola, ma non viene sottolineato. Come posso farlo sottolineare in modo semplice e produttivo?

fonte

2014-08-31 Seth Taddiken

potrebbe non essere adeguatamente supportata dal browser che si sta utilizzando. – sevenseacat

Pensi che Google Chrome non lo supporti? –

Chrome non è perfetto. – sevenseacat

Questo è un bug presente in Chrome dalla versione 36+. text-decoration non viene visualizzato se impostato con :first-letter.

Chrome ha una storia interessante di differenze di rendering per text-decoration: underline rispetto ad altri browser.

Questi esempi hanno la prima lettera impostata su font-size: 10em;. Ho ottenuto gli screenshot con crossbrowsertesting.com.

È possibile visualizzare i risultati completi su Chrome per OSX here e Windows 7 here

È possibile visualizzare il jsfiddle here.

Firefox è coerente

Per confronto, Firefox ha these consistent results, tested from Version 7:

Firefox screenshot

Internet Explorer

Even IE is more consistent.

IE 6 - 7 IE8 +

Screenshot IE 6 - 7 Screenshot IE8+

Chrome è diverso

Questi sono presi da Chrome in esecuzione su Mac OS 10.9 e Windows 7 a 64 bit

Chrome versione 19 - Versione 31

pixel sottolineatura singola

Screenshot 1

Chrome versione 32 - Versione 33

La sottolineatura viene ingrandita

Screenshot 2

Chrome versione 34 - Versione 35

Windows 7 64bit Mac OSX

Screenshot 2 Screenshot 3

Chrome versione 36+

Bug, nessuna sottolineatura quando impostato con :first-letter.

Screenshot 4

fonte

2014-08-31 08:14:19 misterManSam

Per essere onesti, le specifiche non definiscono esattamente come un browser dovrebbe dipingere decorazioni di testo, o se debba ridimensionarsi con il testo, ma mi aspetto che ci sia una certa coerenza. Poi di nuovo, questo * è * Chrome di cui stiamo parlando ... – BoltClock

34 - 35 sembra avere la migliore sottolineatura per la dimensione del carattere. Sembra una svista non avere una dimensione di definizione nelle specifiche. – misterManSam

La specifica dice che UAs * potrebbe * ridimensionare le decorazioni del testo con il testo, ma poiché il rendering dei font dipende così tanto dall'algoritmo di rendering e dal carattere tipografico (ad esempio alcune facce sono progettate per avere glifi veramente piccoli), non penso * potrebbe * definirlo in modo molto preciso. – BoltClock

Uso border-bottom invece:

div.content:first-letter { 
    border-bottom: 1px solid red; 
    color: #bd00df; 
}

Vedi Fiddle

fonte

2014-08-31 07:31:04 haim770

Questo fa il trucco ma voglio vedere se c'è un modo per far funzionare l'attributo di decorazione del testo. –

Risulta che il valore di 'underline' per' text-decoration' quando usato sulla prima lettera non è supportato da Chrome, quindi questo è il più vicino che possiamo ottenere. –

Ci sono molti modi per farlo funzionare con "sottolineatura" anche in Chrome, ma comporta troppo dolore e nel mio caso "border-bottom" fa il lavoro. – haim770

enter image description here

è infatti lavorando bene in cromo. Questo sarebbe un problema il supporto del browser si verificano

DEMO http://jsfiddle.net/3pg23vck/

div.content:first-letter { 
    text-decoration: underline; 
    color: #bd00df; 
}

Chome Mac versione 30.0.1599.101 testato

fonte

2014-08-31 07:33:48 Vector

Chrome 37.0.2062.94 su mac - non funziona per me – misterManSam

Non vedo alcuna sottolineatura in 'Chrome 37.0.2062.102 (64-bit)'. – haim770

Vedo la sottolineatura in Firefox (v31), non in Chrome versione 37.0.2062.94 (64-bit) su Linux. – sevenseacat

: supporto browser text-decoration per la prima lettera

risposta

Firefox è coerente

Internet Explorer

Chrome è diverso

Problemi correlati