Set different CSS sizes for each browser

Question

Set different CSS sizes for each browser

Navigation

#1 by (-1 votes)

-1

I have a problem with my code, in case, I have a banner that in Chrome and Opera, it appears in the exact size of the whole screen, however in Edge and Mozilla it appears broken not occupying 100% height with the others .

In CSS it looks like this: (Note: To run the banner it needs to be height: 100vh, but when you apply this measure to height, the proportion of the banner in the mobile and the chrome browser is disproportionate to the size of the 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");
}

html jquery css navegador bootstrap

asked by anonymous 02.04.2018 / 18:55

1 answer

How to modify the font size of axes in Python matplotlib.pyplot How to validate a text (Assert) in a certain field in Selenium Webdriver?

score -1 · Answer 1

To solve the problem I used a CSS Hack in the case of

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 */
}