После добавления @media не печатать в стилях CSS они не работают в IE11

Question

У меня был класс

.content {
    margin-left: 110px;
    -ms-flex-positive: 1;
    flex-grow: 1;
    flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-basis: 0;
    position: relative;
    width: 50%;
}

, который отлично работал во всех браузерах.Но после изменения на

@media not print {
.content {
    margin-left: 110px;
    -ms-flex-positive: 1;
    flex-grow: 1;
    flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-basis: 0;
    position: relative;
    width: 50%;
}}

<div class"wrapper"> 
<div class"navigation"> </div>
<div class"content"> </div>
</div>

это не работает в IE.Разве @media не должен работать в IE?

Answer 1

В @media print добавьте display: none !important; для вашего .content, оно будет работать для всех браузеров.

* {
    box-sizing: border-box;
    position: relative;
}

.content {
    margin-left: 110px;
    -ms-flex-positive: 1;
    flex-grow: 1;
    flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-basis: 0;
    position: relative;
    width: 50%;
}

@media print {
    .content,
    .content * {
        display: none !important;
    }
}

<div class="wrapper">
    <div class="navigation"> </div>
    <div class="content">In @media print, add display: none !important; it will work.</div>
</div>

Answer 2

Работает нормально! Я использую Windows 10 и ie11. Я не нашел разницы между вашими кодами, может быть, это озадачило вас! для ясности я добавил дополнительный код background: red;. @media not print{} показывает фон, но экран печати - нет. Так что это работает!

.content {
            margin-left: 110px;
            -ms-flex-positive: 1;
            flex-grow: 1;
            flex-shrink: 1;
            -ms-flex-negative: 1;
            flex-basis: 0;
            position: relative;
            width: 50%;
        }

        @media not print {
            .content {
                margin-left: 110px;
                -ms-flex-positive: 1;
                flex-grow: 1;
                flex-shrink: 1;
                -ms-flex-negative: 1;
                flex-basis: 0;
                position: relative;
                width: 50%;
                background: red; /*added for testing the code*/
            }
        }

    <div class="content">
        <h1>Hello!</h1>
    </div>

Answer 3

Вы не указали '=' при назначении имени класса.

Должно быть как ниже.

<div class="wrapper"> This is wrapper
<div class="navigation"> This is navigation</div>
<div class="content">This is content </div>

Я протестировал код в Windows 10, версии IE 11, и он работает как положено.

Попробуйте исправить свой код и сообщите нам о результатах.