Perché ottengo casualmente la stringa "Ã-" anziché "×" quando si imposta il pulsante: dopo {content}?

Question

Sto usando il seguente codice CSS per impostare il testo per un pulsante che rimuoverà un tag:

button.close:after { 
    content: '×'; 
} 

Questo si traduce in un pulsante bello come questo:

Ma in modo casuale la stringa × viene sostituita dalla stringa Ã-. Per prima cosa ho pensato che questo potesse essere collegato alla codifica, ma se davvero fosse stato il problema, penso che questo non sarebbe accaduto casualmente. Succede a bassa frequenza e in questo momento non sta accadendo (aggiornerà la domanda con un'altra schermata di stampa non appena si ripresenta).

Questo codice css proviene da un file .less che sto compilando, quindi minifico e quindi concatenante.

Come posso essere sicuro che la stringa × venga visualizzata sempre?

Answer 1

Provare a utilizzare il valore 'ISO' per quel segno - \00d7

Controllare qui: https://css-tricks.com/snippets/html/glyphs/

Answer 2

Se vedete quei caratteri che probabilmente solo non ha specificato la codifica dei caratteri in modo corretto. Perché quei caratteri sono il risultato quando una stringa multi-byte UTF-8 viene interpretata con una codifica a singolo byte come ISO 8859-1 o Windows-1252.

Utilizzare utf8_decode() per convertirli in caratteri ISO-8859-1 normali. http://php.net/manual/en/function.utf8-decode.php

o aggiungere

<meta charset="UTF-8"> 

o utilizzare header("Content-Type: text/html; charset=utf-8"); in cima ai vostri script PHP.

Answer 3

Il multiplication character ha la sequenza UTF-8 0xC3 0x97. Quando viene decodificato utilizzando lo Windows-1252 character set invece diventa × (A tilde, em dash).

Quindi, il problema è in effetti che il CSS viene decodificato come Windows-1252 anziché come UTF-8. Il CSS viene normalmente decodificato allo stesso modo del documento HTML, quindi sembra che non ci sia alcuna specifica di set di caratteri più nella pagina né nell'intestazione HTTP. Ciò costringe il browser a indovinare quale sia la codifica. Poiché il browser sta facendo l'ipotesi usando tutti i dati disponibili (e l'algoritmo differisce tra i browser), l'ipotesi può essere diversa a seconda di quanta parte della pagina e dei file correlati sono già presenti nella cache.

Specificare la codifica per la pagina nella testa HTML:

<meta charset="utf-8"> 

È inoltre possibile specificare la codifica specifico per il file CSS aggiungendo questo al top, ma che dovrebbe essere necessario solo quando differisce da la codifica della pagina:

@charset "utf-8";