@media 打印不显示隐藏 div

Question

我有一个表格样式的网页，我想将其另存为 PDF。我想在@media print 中显示的大部分 div 内容默认情况下在网络上被隐藏，因为用户在选项卡之间切换。这是 HTML:

<div id="Display1" class="tabcontent">
        <form action="/action_page.php" class="namefield">
            <input type="text" placeholder="Display Name">
        </form>
    <div id="Front1">
        <img class="layout" src="images/display_layout.jpg">
        <p class="input" id="frontview">Front View</p>
        <p class="input" id="topinsert">Top Insert</p>
        <p class="input" id="bottominsert">Bottom Insert</p>
        <div class="shelf-slot" id="ss-01"></div>
        <div class="shelf-slot" id="ss-02"></div>
        <button class="toggleview" onclick="ToggleFront(); ToggleBack ()" style="border: none; padding: 4px 10px; border-radius: 4px; outline: none; color: white;">Show Back View</button>
    </div>
    <div id="Back1" style="display: none">
        <img class="layout" src="images/display_layout.jpg">
        <p class="input" id="backview">Back View</p>
        <p class="input" id="topinsert2">Top Insert</p>
        <p class="input" id="bottominsert2">Bottom Insert</p>
        <div class="shelf-slot" id="ss-03"></div>
        <div class="shelf-slot" id="ss-04"></div>
        <button class="toggleview" onclick="ToggleFront(); ToggleBack ()" style="border: none; padding: 4px 10px; border-radius: 4px; outline: none; color: white;">Show Front View</button>
    </div>
</div>

<script>
  function ToggleFront() {
  var x = document.getElementById("Front1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

  function ToggleBack() {
  var x = document.getElementById("Back1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

在这种情况下，“#Back1”默认隐藏，但用户可以在查看“#Front1”和“#Back1”之间切换，但是，当用户点击打印按钮时，我希望两者都显示。我为@media print 创建了一个样式表：

@media only print {
    * {
         -webkit-print-color-adjust: exact;
    }
    #Display1 {
        display: block;
        position: absolute;
        left: 0px;
        width: 100%;
    }
    #Front1 {
        display: block;
    }
    #Back1 {
        display: block;
    }
    .layout {
        position: absolute;
        width: 350px;
        left: 340px;
        top: 82px;
    }
    input, select, textarea {
        font-size: 2em;
        color: #44748A;
    }
    input[type=text], select {
        width: 96%;
    }
    #topinsert {
        left: 17px;
        top: 180px;
    }
    #bottominsert {
        left: 20px;
        top: 355px;
    }
    #topinsert2 {
        left: 723px;
        top: 180px;
    }
    #bottominsert2 {
        left: 723px;
        top: 355px;
    }
    #ss-01 {
        position: absolute;
        display: block;
        width: 300px;
        height: 106px;
        top: 225px;
    }
    #ss-02 {
        position: absolute;
        display: block;
        width: 300px;
        height: 106px;
        top: 400px;
    }
    #ss-03 {
        position: absolute;
        display: block;
        width: 300px;
        height: 106px;
        top: 225px;
        left: 723px;
    }
    #ss-04 {
        position: absolute;
        display: block;
        width: 300px;
        height: 106px;
        top: 400px;
        left: 723px;
    }
    .toggleview {
        display: none;
    }
}

无论我的样式表如何，打印预览仅显示当时网页上显示的内容。我试过在不同的 div 上弄乱不同的显示值，但我似乎找不到同时显示“#Front1”和“#Back1”的解决方案。很抱歉包含了很多代码，只是想确保没有遗漏任何内容。

Answer 1

了解问题

您做事的方式存在 CSS specificity 问题。

快速总结：特异性是指当几个元素相互竞争时，哪些样式属性被应用到一个元素。它是由 5 个数字组成的序列，表示如下：1.1.1.1.1。数字越高，特异性“越强”。当多个属性相互竞争时（例如 display 在同一元素的多个位置定义），将应用具有最高特异性的属性。

这就是您可以这样做的原因：

.element {
  color: black;
}

.element.current {
  color: red;
}

在您的案例中，display 的特异性受到两种影响：

直接在 HTML 中定义样式 (style="display: none") 将始终赋予以这种方式定义的属性 0.1.0.0.0 的特异性（并在 JS 中添加样式 el.style.display = 'none'将它们添加到 HTML style 属性）
在“正常”中定义样式 CSS 仅影响最后 3 个特异性索引 0.0.x.y.z 其中 x 是选择器中使用的 ID 数量，y是类（和其他东西）的数量，z 是标签名称的数量。它比那复杂一点，但这是基本的想法。

This chart 很好地概述了影响特异性的不同因素以及它们之间的关系。

特异性的一些例子：

#a #b {
  display: none; // specificity of 0.0.2.0.0
}

.a .b {
  display: none; // specificity of 0.0.0.2.0
}

#a .b span {
  display: none; // specificity of 0.0.1.1.1
}

在CSS中覆盖HTML中style属性的唯一方法是使用!important这使属性具有 1.0.x.y.z 的特异性。所以你可以使用

#Display1 {
  display: block !important; // specificity of 1.0.1.0.0
}

有些选择器不添加特异性，这与您的情况相关，因为 媒体查询不添加特异性。例如，在下面的例子中，#el 将是 display: none

@media print {
  #el {
    display: block; // specificity of 0.0.1.0.0
  }
}

#el {
  display: none; // specificity of 0.0.1.0.0
}

在相同特异性的情况下，顺序很重要：要声明的最后一个属性获胜（显然在同一个文件中，但也跨样式表：DOM 顺序中的最后一个获胜).

最后，在比较特异性时，5 个数字中的每一个都压倒了后面的数字：

0.0.0.1.0总会战胜0.0.0.0.99
0.0.1.0.0总会战胜0.0.0.99.99
等等

解决方案

在你的情况下，如果你需要/想要在 HTML 中保留 style 属性，你应该在必要时使用 !important 覆盖它们

@media only print {
  #Front1 {
    display: block !important;
  }
}

但是请注意，您应该始终努力尽可能少地使用 !important，因为它有点像核选项。如果未来的开发者需要人为地增加他们的 CSS 选择器的特异性，他们将高举双臂并诅咒旧神，因为 someone 到处都使用 !important .

@media 打印不显示隐藏 div

@media print not displaying hidden div

html

css

printing

media

了解问题

解决方案