Boa noite. Uso por padrão o navegador firefox e, mesmo seguindo o código correto do curso e documentação obtive os seguintes problemas:
- Ao implementar um :hover em um item de lista li onde a cor de fundo deveria mudar, não obtive sucesso. Ao marcar no DevKit a opção 'hov' funcionava corretamente, mas quando dependia do meu mouse selecionar nada acontecia. E usando o inspecionar interativo conseguia garantir que o mouse realmente estava no item correto.
- Tentando colocar uma imagem em um campo input como background-image do placeholder, a imagem não aparecia corretamente de jeito algum. No inspecionar parecia que ela estava sendo coberta pelo próprio padding do campo.
Ambos os problemas foram solucionados quando eu testei no Chrome, sem problemas. Irei anexar um print ilustrando a diferença do caso 2.
Fiquei com dúvida sobre o motivo disso acontecer se estou usando o reset.css para não ter diferença entre navegadores. O ChatGPT disse que o reset não se aplica a pseudo classes ou pseudo elementos (hover e placeholder), e que eles ficam a critério do navegador em relação a sua implementação.
Isso é verdade? Não consegui achar mais informações procurando na internet e gostaria de entender melhor como isso acontece e como devo proceder para criar um site que não tenha tanta diferença entre navegadores. Obrigado por ler até aqui!