Diferença na exibição em navegadores diferentes | HTML e CSS

2
respostas

por Rodrigo Viana de Oliveira

| 76.9k xp | 4 posts

Freelancer

Terminei os cursos "HTML5 e CSS3 - Partes 1 e 2" da formação frontend e pude perceber que as páginas desenvolvidas nos cursos apresentam diferenças consideráveis quando são exibidas no Chrome e no Firefox.

No Chrome tudo é exibido corretamente exatamente como apresentado durante o curso, mas isso não acontece no Firefox. No Firefox alguns elementos são exibidos sem a formatação do CSS utilizado. Dá a impressão de que alguns estilos são ignorados pelo navegador da Mozilla.

Essas diferenças de exibição são comuns entre navegadores? Como padronizar a exibição das nossas páginas em todos os navegadores que existem no mercado?

2 respostas

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

08/02/2021

Fala ai Rodrigo, tudo bem? Vamos lá:

Essas diferenças de exibição são comuns entre navegadores?

Sim, cada navegador aplica seus estilos próprios e padrões para determinados elementos.

Como padronizar a exibição das nossas páginas em todos os navegadores que existem no mercado?

Nesse caso é uma boa prática você utilizar um reset CSS, eu gosto muito e recomendo o Normalize.css: https://necolas.github.io/normalize.css/ (deve ser o primeiro CSS importado na página)

Dessa forma você consegue tirar esses padrões e aplicar seus estilos do zero.

Espero ter ajudado.

por Emilly Ramos Teixeira

| 65.6k xp | 21 posts

10/02/2021

Sim, essas diferenças são comuns. Para padronizar a exibição de nossas páginas nos navegadores você deve especificar o motor de renderização de cada browser na hora de aplicar os seus estilos, como farei abaixo.

div{

-webkit-border-radius : 10px; -moz-border-radius :10px; -ms-border-radius:10px;

}

Navegadores e seus respectivos motores de renderização :

Chrome,Safari = Webkit

Internet Explorer = Trident

Firefox = Gecko