-1

estou com um probleminha com meu código, no caso, tenho um banner que no Chrome e Opera, ele aparece no tamanho exato da tela toda, porém no Edge e no Mozilla ele aparece quebrado não ocupando 100% de altura com os outros.

No CSS está assim: (OBS: Para funcionar o banner ele precisa estar height: 100vh, porém quando se aplica essa medida ao height, a proporção do banner no mobile e no navegador chrome fica desproporcional ao tamanho da div.)

.sec0{
    background-size: cover;
    background-attachment: fixed;
    background: no-repeat;
    -webkit-background-size: 100%;
    text-align: bottom;
    background-size: 100%;
    width: 100%;
    -webkit-width: 100%;
    -moz-width: 100%;
    -moz-height: 100vh;
    -ms-width: 100%;
    -ms-height: 100vh;
    -o-width: 100%;
    -o-height: 100vh;
    background-image: url("img/banner1.jpg");
}
2
  • 2
    Sobre a imagem ficar proporcional tente colocar background-size:cover para ver se ajuda. Outra coisa width e height não precisa de prefixo tipo -o- e -moz- etc! Se possível Edite sua pergunta com o CSS completo assim como o HTML. Da forma que vc colocou não da para te responder com precisão.
    – hugocsl
    2/04/2018 às 17:23
  • Obrigado pela sugestão! usei um CSS Hack para cada navegador e resolveu meu problema 2/04/2018 às 19:41

1 Resposta 1

-1

Para resolver o problema utilizei um CSS Hack no caso do

Mozilla:

@-moz-document url-prefix() { /* CSS no qua queira utilizar somente nesse navegador */ }

Edge:

@supports (-ms-ime-align:auto) {
 /* CSS no qua queira utilizar somente nesse navegador */
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .