Как масштабировать Internet Explorer в CSS-хаке / медиа-запросе? - PullRequest
Новая
       23

Как масштабировать Internet Explorer в CSS-хаке / медиа-запросе?

0 голосов
/ 05 мая 2019

Я делаю свой сайт совместимым с Internet Explorer.Как мне масштабировать сайт в Internet Explorer в css hack?

Сначала я закодировал сайт для Firefox.Вот почему я использовал некоторые CSS-хаки для некоторых браузеров.Теперь, когда я хотел начать масштабировать сайт в разных браузерах, я начал с Internet Explorer.Я использовал медиа-запрос для взлома CSS, чтобы идентифицировать Internet Explorer, но для масштабирования сайта мне нужен еще один медиа-запрос.Я уже пытался просто «добавить» медиа-запрос к тому, который идентифицирует Internet Explorer, и затем я скопировал его с min-width из 600, 768 и 998, но он просто работал с min-width: 600px и проигнорировал другие медиа-запросы,Так есть ли другой способ масштабирования (просто!) Веб-сайта в Internet Explorer или я неправильно его кодировал?Также у меня есть тот же вопрос с Chrome, где я не использовал медиа-запрос, но я все еще там не работаю. 

/*IE*/ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
    img.Marat {max-width: 13%;margin-left: 62%;height: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
    table.table {margin-top:15%;width:150%;margin-left:-325%;}
    .Abstand4 {margin-left:-130%;}
    img.Bild4 {margin-left:-1100%;max-width: 80%;height: auto;}
    img.Bild6 {margin-left:-410%;margin-top:8.5%;max-width: 58%;height: auto;}
}

/*Chrome*/ @supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) { 
    img.Marat {max-width: 50%;margin-left: -50%;height: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}  
    table.table {margin-top:15%;width:150%;margin-left:-20%;}
    .Abstand4 {margin-left:-130%;}
    img.Bild4 {margin-left:-1100%;max-width: 80%;height: auto;}
    img.Bild6 {margin-left:-410%;margin-top:8.5%;max-width: 58%;height: auto;}
    }
}

Я хочу масштабировать сайт в Internet Explorer / Chrome, но я делаюне знаю, как это сделать в связи с тем, что мне пришлось использовать css-хаки для идентификации сайтов.

Извините за мой плохой английский и спасибо за попытку помочь мне!

1 Ответ

0 голосов
/ 06 мая 2019

Если вы используете несколько медиа-запросов с минимальной шириной, вы должны поставить минимальное значение в первом и максимальное в последнем, как это: 

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        /* Set the background color of body to tan */
        body {
            background-color: tan;
        }

        @media screen and (min-width:600px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
            body {
                background-color: blue;
            }
        }

        @media screen and (min-width:768px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
            body {
                background-color: olive;
            }
        }

        @media screen and (min-width:998px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
            body {
                background-color: aqua;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

В этом порядке медиа-запросы хорошо работают наIE10 +.Если порядок неправильный, медиазапросы ниже не будут работать.

В браузере Chrome мы также должны следовать этому правилу.Вы можете ссылаться на следующий код: 

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        /* Set the background color of body to tan */
        body {
            background-color: tan;
        }
        @supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
            @media screen and (min-width:600px) {
                body {
                    background-color: blue;
                }
            }


            @media screen and (min-width:768px) {
                body {
                    background-color: olive;
                }
            }

            @media screen and (min-width:998px) {
                body {
                    background-color: aqua;
                }
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
...