html - 显示 css 属性不适用于打印样式表

Question

我为屏幕定义了一个样式表

<link type="text/css" rel="stylesheet" href="PATH/style.css">

和打印样式表

<link media="print" type="text/css" rel="stylesheet" href="PATH/printable.css">

在 style.css 中有一些元素没有显示

#img-sign{
    display:none;
}

.signatures{display:none;}

但是当我打印时，我想显示它们，所以在 printable.css 中

#img-sign{
    width:370px;
    display:inline-block;
}

.signatures{
    text-align:center;
    margin-top:80px;
}

问题是这些元素不会出现在打印品中。

这是我的 HTML 代码

<div id="preview">
    <img src="PATH" id="img-sign" />
    <div class="signatures">
        <div class="profesional-signature">
            <hr>
            Profesional signature
        </div>
        <div class="customer-signature">
            <hr>
            Customer signature
        </div>
    </div>
</div>

如果我通过 visibility: hidden 更改属性 display:none 并通过 visibility: visible 更改 display:block > 打印时一切看起来都如我所愿，但在我的网页中，有白色区域。我已经遇到这个问题 2 天了。我做错了什么？

Answer 1

style.css 没有媒体类型，所以它将涵盖所有媒体类型，尝试向它添加 media="screen"，希望它能工作，如果不行，那么您将需要切换样式表