Nossa equipe precisava de uma única lista suspensa para adicionar ícones aos itens da lista, dependendo do tipo de item. A lista em si é um componente de terceiros que eu não queria tocar. Os ícones são implementados na forma de uma fonte, ou seja, são caracteres Unicode.
Como solução, no servidor, dependendo do tipo de elemento, o símbolo do ícone
\ uXXXX foi adicionado como uma letra regular e belos quadrados foram recebidos no cliente, pois a fonte usada para a lista não contém os códigos dos nossos ícones. Aqui a pseudo-
classe CSS veio em nosso auxílio
:: first-letterEsta instrução está bem descrita em
"Pseudo-classe: primeira letra" e em
"12 fatos pouco conhecidos do CSS (continuação)" .
Tudo funciona como um relógio: defina uma classe, defina uma pseudo-classe com a nossa fonte (família de fontes), execute-a - funciona no Chrome. Verificação no IE11 e Edge - funciona. Mas no Firefox - não funciona. Depois de todas as danças com um pandeiro (histórico de limpeza e cache), finalmente garantimos que ele definitivamente não funcione no Firefox.
Uma pesquisa na Internet mostrou (
https://css-tricks.com/forums/topic/first-letter-firefox-problem ) que o Firefox está tentando determinar se um personagem é uma letra para aplicar uma pseudo-classe e, se pensar de forma diferente, a pseudo-classe é simplesmente ignorado. Isso geralmente corresponde às informações em
"12 fatos pouco conhecidos sobre CSS (continuação)", mas é claro que o Firefox entende "não-letras" como algo diferente do que outros navegadores modernos entendem.
Não conseguimos resolver esse problema de frente, tivemos que adicionar
amplitude aos itens da lista com nossos caracteres especiais no cliente.
A conclusão, infelizmente, é que, no momento, a pseudo classe de
primeira letra não pode ser usada para resolver o problema de exibir um caractere personalizado em uma string.
UPD Obrigado
dartraiden - este problema é conhecido no Mozilla -
bug oficial