Minha página fica errada no Firefox e certa no Edge, como arrumar?

Oi, a página que fiz (só com html e css) não está mostrando corretamente no Firefox mas está certa no Edge. O que eu posso fazer pra ficar aparecendo direitinho no Firefox também?

Aqui a página publicada, só fica bugada no Firefox.

Como fica no Edge:

Como fica no Firefox:

3 curtidas

:wave:t2:

Faz um tempo que parei de treinar Web Dev mas, certas propriedades para funcionar no Firefox e também nos navegadores baseados no Safari da Apple, tinha de usar códigos do tipo:

-moz-appearance para os navegadores baseados no motor do Firefox e -webkit-appearance para os baseados no Safari. O problema que eu esqueci onde usar :blush:, mas acredito que seja onde ajusta os botões e tals.

Talvez alguém na comunidade lembre-se e/ou saiba como fazer isso :innocent:

:vulcan_salute:t2:

Já ouvi falar desses códigos mas não cheguei a ir a fundo, vou dar uma olhada, obrigada! Mas acredita que nem os <br> que to dando entre os input funcionam no firefox? Botei troçentos <br> pra testar e não adianta, que loucura!

1 curtida

o vscode diz que não é bom mais usar o -moz-appearance e o -webkit-appearance, não faço ideia do pq <br> e margin-left (da imagem) não estão funcionando no Firefox :sob:

Oi @steph tudo bem?

Dei uma olhadinha no seu código e percebi um erro comum de quem inicia no desenvolvimento web, que é usar um elemento HTML para fazer uma coisa ao qual não foi projetado, no seu caso está utilizando o elemento <br> para dar espaçamento entre os elementos.

O que eu recomendo é remover os elementos <br> e adicionar no css um margin nos elementos <input>, <button> e <a> para dar o espaçamento desejado, você pode fazer isso adicionando uma nova class nesses elementos ou utilizando as classes já existentes, como por exemplo o .InputUser ou .font.

PS: Com o tempo você vai pegando o jeito e aprendendo os ajustes que precisa fazer no CSS para funcionar nos principais navegadores, particularmente dou sempre preferência ao Chrome por ter o motor mais utilizado no mundo, depois vou vendo os outros.

PS2: Vou deixar aqui um exemplo de um WebApp que estou desenvolvendo para minha empresa https://fxsistemas.app/, se quiser ver como é pode abrir ele em vários navegadores e vai notar que tem uma leve diferença. Um conselho que dou é não se preocupar muito com os mínimos detalhes entre os navegadores, isso deixa qualquer pessoa maluca, afinal o mais importante é a usabilidade do seu aplicativo e não a diferença milimétrica dele nos diferentes navegadores.

Curiosidade: Esse WebApp que estou desenvolvendo também é um PWA, ou seja, ele é “instalável” e funciona parcialmente offline. Na minha opinião esse é o futuro dos aplicativos, penso que no futuro só vamos precisar ter um aplicativo instalado no dispositivo, que será um navegador, todo o resto poderá ficar na nuvem ou em cache local para uso temporário offline. :wink:

1 curtida

Muito obrigada!! Sim ainda tô aprendendo, muito obrigada pelas dicas vai me ajudar demais!

Eu fiquei muito confusa de mesmo sendo errado usar o br ele funcionar no edge e não no Firefox, quando inspecionei ele no Firefox aparecia que o tamanho era de 0x0 :thinking:

Então é melhor eu não me preocupar com o passarinho não ficar alinhado com o T como é pra ser? Ele tem um margin-left se não me engano, e que não pega no Firefox :sob: