css - 打印时隐藏边框和调整大小（更改缩放）

Question

我有这个：

<div id="print_special" style="width: 1050px; zoom: 0.8; margin: 0 auto; text-align: center; border: 5px solid black">

其中，当用户打印/预览时，我希望它将缩放更改为 100% 并摆脱边框。

我在尝试：

@media print
{
    #print_special {
        border-style: none;
        border: 0px solid black;
        zoom: 1;
    }
}

但它并没有像想象的那样工作。如果我这样做display:none;，它会按预期摆脱 div，所以我知道@media 打印工作正常。问题是什么？

score 2 · Accepted Answer

您的内联 CSS 覆盖了您的打印样式表。您要做的最简单的事情是更改您的 @media print {} 样式，如下所示：

@media print
{
    #print_special { border: none !important; zoom: 1 } 
}

!important 部分告诉浏览器您不希望该值被级联进一步定义的样式覆盖。更进一步，我建议将所有样式信息从标记中提取出来，并将其全部放入包含媒体查询的 CSS 文件中，这样您就不必担心级联问题。但是，如果您不想这样做，请使用 !important。

1 回答 1