Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Por que o padding do .produtos li ficou diferente no firefox

Olá, tenho usado o firefox para visualizar o arquivo html e na estilização da lista dos produtos eu não consegui deixar as 3 imagens uma au lado da outra usando o parametro que o instrutor utilizou, será que o navegador calcula de forma diferente? Mudei o padding de 0 1.5% para 0 1.4%. Esse 0.1% é o suficiente para jogar a terceira imagem para baixo. Por que?

.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.4%;
    padding: 30px 20px;
    box-sizing: border-box;
}
3 respostas
solução!

Olá Walter, tudo bem ?

Existe sim uma incompatibilidade entre os navegadores e isso é bastante comum.

Isso ocorre porque os navegadores não suportam 100% todas as propriedades igualmente, dessa forma, o mesmo código acaba se apresentando de forma diferente de acordo com o browser que o arquivo é aberto.

Uma série de adaptações são necessárias para minimizar os efeitos dessa incompatibilidade, uma delas é utilizando o arquivo reset.css, mas ainda assim divergências irão existir.

Quando quiser saber como uma determinada propriedade CSS é suportada de acordo com os navegadores, você pode pesquisá-la no MDN e ao final da documentação estará exposto, veja o exemplo da propriedade box-sizing.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

E o site Can I use também é especializado em explorar os diferentes suportes.

Como citei, a incompatibilidade é comum e faz com que uma série de adaptações tenham que ser feitas no código. Uma das estratégias de como resolver essa questão além do reset.css, é através de propriedades prefixadas oferecidas pelos mecanismos de renderização, exemplo:

  • -webkit para Chrome e Safari
  • -moz para Firefox
  • -o para Opera
  • -ms para Internet Explorer

São usados para implementar recursos CSS novos que sejam aplicadas de acordo com cada navegador. Exemplo:

-webkit-column-fill: auto;
-moz-column-count: 3;

Espero ter ajudado, abraços! =)

Bom dia.`

É muito bacana quando utilizar o css ter mais que um navegador na máquina, principalmente aquele ao qual o instrutor esta utilizando, se puder verifique no chrome qual é o comportamento deste mesmo código

Muito obrigado pela explicação Beatriz!

Bom dia Fábio. Fiz esse teste antes mesmo de postar aqui, no Chrome o resultado é idêntico ao da aula, aí fiquei com essa pulga atrás da orelha. Como o arquivo de "reset" estava linkado eu pensei que o resultado seria o mesmo. Mas foi bom aprender que há essas diferenças de navegadores. Obrigado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software