display 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>

如果我按display:none更改属性visibility: hidden，display:block更改visibility: visible，我打印的内容一切正常，但在我的网页中，有白色区域。 这个问题我已经2天了。 我做错了什么？

Answer 1

style.css没有媒体类型，所以它将涵盖所有媒体类型，尝试添加media =“screen”，希望这应该有用，如果没有，那么你需要切换样式表