Warum bekomme ich zufällig die Zeichenfolge "Ã-" anstelle von "×", wenn ich die Schaltfläche: nach {Inhalt} einstelle?

Question

ich folgende CSS bin mit dem Text für eine Schaltfläche festlegen, die einen Tag entfernen wird:

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

Dies führt zu einer gut aussehenden Taste wie folgt aus:

Aber zufällig die Die Zeichenfolge × wird durch die Zeichenfolge Ã- ersetzt. Ich dachte zuerst, dass dies mit der Codierung zusammenhängen könnte, aber wenn es wirklich das Problem wäre, denke ich, dass dies nicht zufällig geschehen würde. Es passiert mit einer niedrigen Frequenz und in diesem Moment passiert es nicht (wird die Frage mit einem anderen Druckbildschirm aktualisieren, sobald es wieder passiert).

Dieser Css-Code stammt aus einer .less Datei, die ich kompiliere und dann reduziere und dann verkette. Wie kann ich sicherstellen, dass die Zeichenkette × immer angezeigt wird?

Answer 1

Versuchen Sie es mit ‚ISO‘ Wert für das Zeichen - \00d7

prüfen: Sie wahrscheinlich einfach nicht geben Sie die Zeichencodierung richtig https://css-tricks.com/snippets/html/glyphs/

Answer 2

Wenn Sie diese Zeichen sehen. Diese Zeichen sind das Ergebnis, wenn eine UTF-8-Multi-Byte-Zeichenfolge mit einer Einzelbyte-Codierung wie ISO 8859-1 oder Windows-1252 interpretiert wird.

Verwenden Sie utf8_decode(), um sie in normale ISO-8859-1-Zeichen zu konvertieren. http://php.net/manual/en/function.utf8-decode.php

oder

<meta charset="UTF-8"> 

oder header("Content-Type: text/html; charset=utf-8"); auf Ihre PHP-Skripten hinzuzufügen.

Answer 3

Die multiplication character hat die UTF-8-Sequenz 0xC3 0x97. Wenn dies unter Verwendung des Windows-1252 character set decodiert wird, wird es stattdessen × (A tilde, em dash).

Also ist das Problem in der Tat, dass das CSS als Windows-1252 statt als UTF-8 dekodiert wird. Das CSS wird normalerweise auf die gleiche Weise wie das HTML-Dokument decodiert. Es scheint also, dass weder auf der Seite noch im HTTP-Header eine Zeichensatzspezifikation vorhanden ist. Das zwingt den Browser zu raten, was die Codierung ist. Da der Browser die Vermutung unter Verwendung verfügbarer Daten macht (und der Algorithmus zwischen den Browsern unterschiedlich ist), kann die Schätzung unterschiedlich sein, abhängig davon, wie viel der Seite und verwandter Dateien bereits im Cache sind.

Geben Sie die Codierung für die Seite im HTML-Kopf:

<meta charset="utf-8"> 

Sie auch die Codierung speziell für die CSS-Datei, indem Sie diese an der Spitze angeben können, aber das nur erforderlich sein soll, wenn es von dem unterscheidet, die Seitencodierung:

@charset "utf-8";