Nuestro equipo necesitaba una sola lista desplegable para agregar íconos a los elementos de la lista, según el tipo de elemento. La lista en sí es un componente de terceros que no quería tocar. Los iconos se implementan en forma de fuente, es decir, son caracteres Unicode.
Como solución en el servidor, según el tipo de elemento, el símbolo del icono
\ uXXXX se agregó como una letra normal y se recibieron hermosos cuadros en el cliente, ya que la fuente utilizada para la lista no contiene los códigos de nuestros iconos. Aquí la pseudo-
clase CSS vino en nuestra ayuda
:: primera letraEsta instrucción está bien descrita en
"Pseudo-clase: primera letra" y en
"12 hechos CSS poco conocidos (continuación)" .
Todo funciona como un reloj: establece una clase, establece una pseudo-clase con nuestra fuente (font-family), ejecútala, funciona en Chrome. Verificación en IE11 y Edge - funciona. Pero en Firefox, no funciona. Después de todos los bailes con una pandereta (historial de limpieza y caché), finalmente nos aseguramos de que definitivamente no funcione en Firefox.
Una búsqueda en Internet mostró (
https://css-tricks.com/forums/topic/first-letter-firefox-problem ) que Firefox está tratando de determinar si un personaje es una letra para aplicar una pseudo-clase, y si piensa de manera diferente, entonces la pseudo-clase es simplemente ignorado En general, esto coincide con la información en
"12 datos poco conocidos sobre CSS (continuación)", pero es obvio que Firefox entiende "no letras" como algo diferente de lo que entienden otros navegadores modernos.
No pudimos resolver este problema de frente, tuvimos que agregar
espacio a los elementos de la lista con nuestros caracteres especiales en el cliente.
La conclusión, desafortunadamente, es que por el momento, la
pseudoclase de primera letra no se puede usar para resolver el problema de mostrar un carácter personalizado en una cadena.
UPD Gracias
dartraiden : este problema se conoce en Mozilla -
error oficial