css - 添加@media not print in css styles 后，它们在 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 中，为您的.content 添加display: none !important; 它适用于所有浏览器。

* {
    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>