Tim kami membutuhkan daftar drop-down tunggal untuk menambahkan ikon ke item daftar, tergantung pada jenis item. Daftar itu sendiri adalah komponen pihak ketiga yang tidak ingin saya sentuh. Ikon diimplementasikan dalam bentuk font, mis., Mereka adalah karakter Unicode.
Sebagai solusi di server, tergantung pada jenis elemen, simbol ikon
\ uXXXX ditambahkan sebagai huruf biasa dan kotak yang indah diterima pada klien, karena font yang digunakan untuk daftar tidak berisi kode ikon kami. Di sini CSS pseudo-
kelas datang ke bantuan kami
:: huruf pertamaInstruksi ini dijelaskan dengan baik dalam
"Pseudo-class: first-letter" dan dalam
"12 Fakta CSS yang Diketahui Sedikit (Lanjutan) .
"Semuanya berfungsi seperti jam: atur kelas, atur kelas pseudo dengan font kami (font-family), jalankan - itu berfungsi di Chrome. Verifikasi di IE11 dan Edge - berfungsi. Tetapi di Firefox - tidak bekerja. Setelah semua tarian dengan rebana (riwayat pembersihan dan cache), kami akhirnya memastikan bahwa itu pasti tidak berfungsi di Firefox.
Sebuah pencarian di Internet menunjukkan (
https://css-tricks.com/forums/topic/first-letter-firefox-problem ) bahwa Firefox sedang mencoba untuk menentukan apakah suatu karakter adalah huruf untuk menerapkan kelas pseudo, dan jika ia berpikir secara berbeda, maka kelas semu hanya diabaikan. Ini umumnya cocok dengan informasi dalam
"12 Fakta Yang Sedikit Diketahui Tentang CSS (Lanjutan)," tetapi jelas bahwa Firefox memahami "non-huruf" sebagai sesuatu yang berbeda dari apa yang dipahami browser modern lainnya.
Kami tidak dapat menyelesaikan masalah ini langsung, kami harus menambahkan
rentang ke item daftar dengan karakter khusus kami di klien.
Kesimpulannya, sayangnya, adalah bahwa pada saat ini,
huruf pseudo
- kelas pertama tidak dapat digunakan untuk memecahkan masalah menampilkan karakter khusus dalam string.
UPD Terima kasih
dartraiden - masalah ini dikenal di Mozilla -
bug resmi