添加@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

一切正常！我正在使用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 2

在@media印刷品中，为您的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 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版本测试了该代码，并且按预期工作。

尝试更正您的代码，并让我们知道结果。