5
respostas

Olá, esse código esta tendo conflito com os navegadores firefox e google crhome

.conteudoPrincipal-cursos-link{
    width: 22%;
    margin: 3;
    /*margin-top: 30px;*/
}

Esse funciona perfeitamente no google chrome, mas não funciona no firefox, para funcionar no firefox tenho que acrescentar o margin-top:30px. Porque isso aocntece?

5 respostas

Oi Paulo, tudo bem? Seu margin está sem unidade de medida, ele tá assim mesmo no seu código?

.cabecalhoPrincipal .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cabecalhoPrincipal-nav{
    display: flex;
}

.rodapePrincipal-patrocinadores .container{
    display: flex;
    justify-content: space-between;
}
.rodapePrincipal-patrocinadores-list{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 75%;
    margin-right: 5%;
}
.rodapePrincipal-contatoForm{
    width: 25%;
}
.rodapePrincipal-contatoForm-fieldset{
    display: flex;
}
.rodapePrincipal-navMap-list{
    display: flex;
    /*flex-direction: column;
    flex-wrap: wrap;*/
    flex-flow: column wrap;
    height: 250px;
}
.conteudoPrincipal-cursos{
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
}
.conteudoPrincipal-cursos-link{
    width: 23%;
    margin: 1%;
    /*margin-top: 30px;*/
}
.conteudoPrincipal-cursos-link:nth-child(4n){
    margin-right: 0;
}
.conteudoPrincipal-cursos-link:nth-child(4n+1){
    margin-left: 0;
}
.videoSobre .container{
    display: flex;
}
.videoSobre-sobre {
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-grow: 2;
}
.videoSobre-sobre-list {
    flex-grow: 1;
}
.videoSobre-video {
    flex-grow: 1;
}

/*************************/
/***** Parte mobile*******/
@media(max-width: 768px){
    .cabecalhoPrincipal-nav{
        flex-direction: column;    
    }
    .cabecalhoPrincipal .container{
        flex-direction: column;
        align-items: initial;
        text-align: center;
    }
    .conteudoPrincipal-cursos-link{
        width: 100%;
    }
    .conteudoPrincipal-cursos{
        flex-direction: column;
    }
    .rodapePrincipal-navMap-list{
        height: auto;
    }
    .rodapePrincipal-patrocinadores .container{
        flex-direction: column;
        align-items: center;
    }
    .rodapePrincipal-patrocinadores-list{
        margin: 0;
        width: 100%;
    }
    .rodapePrincipal-contatoForm{
        width: 100%;
    }
    .rodapePrincipal-contatoForm-fieldset{
        justify-content: center;
    }
    .cabecalhoPrincipal-nav-link-app{
        order: -1;
    }
    .videoSobre .container{
        display: flex;
        flex-wrap: wrap;
    }
}

Não está, acabei inserindo sem a unidade de medida... Segue o código completo.

Quais são as diferenças que nota entre o chrome e o firefox? Pode tentar mandar um link de um print pra gente ver resultado nisso no projeto?

Olá o/

Esse comportamento foi reportado como um bug no Firefox.

margine padding verticais declarados em % deveriam ser calculados com base na largura do elemento pai. Esse é o comportamento esperado, certo? Porém, em flex-items, esses valores são calculados com base na altura do elemento flex-container. Se não houver um valor declarado para a propriedade height do mesmo, margin e padding de seus flex-items não podem ser calculados, resultando em 0. Faça o teste no Firefox declarando um height qualquer para o flex-container e veja os valores sendo aplicados corretamente.

No Chrome, esses valores estão sendo calculados com base na largura do flex-container (que possibilita o cálculo de margin e padding mesmo sem um valor declarado). O que não está de acordo com a especificação que, como disse acima, propõe que os valores sejam calculados com base na altura do flex-container (para margin e padding verticais).

Concluindo, o bug na verdade é no Chrome, por não seguir o comportamento previsto na especificação, por mais que esteja "funcionando".

Obrigado pela dúvida! Me ajudou a descobrir essa... peculiaridade dos browsers XD

Hey, Paulo o/

Conseguiu resolver o problema com os navegadores?

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