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打印正常工作。有什么问题？

Answer 1

您的内联CSS会覆盖您的打印样式表。您最简单的方法是更改@media print {}样式：

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

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