@media 打印不显示隐藏的 div

如何解决@media 打印不显示隐藏的 div

我有一个表单样式网页，我想将其另存为 PDF。当用户切换选项卡时，我希望在 @media 打印中显示的大部分 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”的解决方案。我很抱歉包含了很多代码，只是想确保没有遗漏任何东西。

解决方法

了解问题

您做事的方式存在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 { {1}} 属性）
• 在“普通”CSS 中定义样式仅影响最后 3 个特异性索引 style，其中 0.0.x.y.z 是选择器中使用的 ID 数，x 是类数（和其他东西），以及 y 标签名称的数量。这比那要复杂一些，但这是基本思想。

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

一些特殊性的例子：

z

在 CSS 中覆盖 HTML 中 #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 } 属性特异性的唯一方法是使用 style，它赋予属性 !important 的特异性。所以你可以使用

1.0.x.y.z

某些选择器不添加特异性，这与您的情况相关，因为媒体查询不添加特异性。例如，在以下情况下，#Display1 { display: block !important; // specificity of 1.0.1.0.0 } 将是 #el

display: none

在同等特殊性的情况下，顺序很重要：要声明的最后一个属性获胜（显然在同一个文件中，但也可以跨样式表：DOM 顺序中的最后一个获胜）。

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

• @media print { #el { display: block; // specificity of 0.0.1.0.0 } } #el { display: none; // specificity of 0.0.1.0.0 } 将永远战胜0.0.0.1.0
• 0.0.0.0.99 将永远战胜0.0.1.0.0
• 等

解决方案

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

!important

但是请注意，您应该始终努力尽可能少地使用 @media only print { #Front1 { display: block !important; } } ，因为它有点像核选项。如果未来的开发者需要人为地增加其 CSS 选择器的特殊性，因为有人到处使用 !important，他们会向空中挥舞手臂并诅咒旧神。