Tại sao tôi ngẫu nhiên nhận được chuỗi "Ã-" thay vì "×" khi đặt nút: sau {content}?

Question

Tôi đang sử dụng css sau để thiết lập văn bản cho một nút đó sẽ loại bỏ một thẻ:

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

Điều này dẫn đến một nút tìm kiếm tốt như thế này:

Nhưng ngẫu nhiên chuỗi × được thay thế bằng chuỗi Ã-. Lần đầu tiên tôi nghĩ rằng điều này có thể liên quan đến mã hóa nhưng nếu thực sự nó là vấn đề tôi nghĩ rằng điều này sẽ không xảy ra ngẫu nhiên. Nó xảy ra ở tần số thấp và tại thời điểm này nó không xảy ra (sẽ cập nhật các câu hỏi với một màn hình in ngay sau khi nó xảy ra một lần nữa).

Mã css này xuất phát từ tệp .less mà tôi đang biên dịch rồi sau đó rút gọn và sau đó ghép nối.

Làm cách nào để đảm bảo chuỗi × sẽ luôn được hiển thị?

Answer 1

Hãy thử sử dụng giá trị 'ISO' cho dấu hiệu cho thấy - \00d7

Kiểm tra ở đây: https://css-tricks.com/snippets/html/glyphs/

Answer 2

Nếu bạn thấy những ký tự mà bạn có lẽ chỉ không xác định mã hóa ký tự đúng. Bởi vì các ký tự đó là kết quả khi một chuỗi nhiều byte UTF-8 được diễn giải bằng một mã hóa byte đơn như ISO 8859-1 hoặc Windows-1252.

Sử dụng utf8_decode() để chuyển đổi chúng thành các ký tự ISO-8859-1 bình thường. http://php.net/manual/en/function.utf8-decode.php

hoặc thêm

<meta charset="UTF-8"> 

hoặc sử dụng header("Content-Type: text/html; charset=utf-8"); trên đầu trang của các kịch bản PHP của bạn.

Answer 3

multiplication character có trình tự UTF-8 0xC3 0x97. Khi được giải mã bằng cách sử dụng Windows-1252 character set thay vào đó, nó sẽ trở thành × (A tilde, em dash).

Vì vậy, vấn đề thực sự là CSS được giải mã dưới dạng Windows-1252 thay vì là UTF-8. CSS thường được giải mã giống như tài liệu HTML, vì vậy dường như không có netier đặc tả bộ ký tự nào trong trang cũng như trong tiêu đề HTTP. Điều đó buộc trình duyệt đoán mã hóa là gì. Khi trình duyệt đang thực hiện phỏng đoán bằng cách sử dụng bất kỳ dữ liệu có sẵn nào (và thuật toán khác nhau giữa các trình duyệt), đoán có thể khác nhau tùy thuộc vào số lượng trang và tệp có liên quan trong bộ nhớ cache đã có.

Xác định mã hóa cho trang vào đầu HTML:

<meta charset="utf-8"> 

Bạn cũng có thể chỉ định mã hóa đặc biệt cho các tập tin CSS bằng cách thêm này ở phía trên, nhưng điều đó chỉ nên cần thiết khi nó khác với mã hóa trang:

@charset "utf-8";