@media print display:none无效

Question

我已经尝试了超过3个星期,不同的实现试图让正确的部分不显示,并让左侧部分显示为全宽.鉴于我的研究显示没有简单或简化的方法来快速渲染打印视图而不查看打印预览,我要求一些帮助来解决这个问题.

不起作用的印刷媒体css是这样的:

#gc {
    width: 100%;
}
#asideTrack {
/*      width: 100%;*/
    display: none;
}
.asideTrack {
/*      width: 100%;*/
    display: none;
}
.slideAside {
/*      width: 100%;*/
    display: none;
}
#slideAside {
    display:none
}

有什么建议？

Answer 1

在CSS下限规则覆盖顶部,如果它们具有相同的优先级(取决于选择器)

你不是在@media块中编写你的常见css,它比你的@media打印块低,所以它会覆盖你的@media打印样式.例如,这就是为什么在打印预览中你的左块宽度为74%(因为这个规则比@media打印块的规则低,你说它是100%).

我希望它有所帮助.

解决方案

1. 在css文件中,您可以将介质打印块放在文件末尾.
2. 将!important指令添加到媒体打印块中的某些规则.即:p {颜色:红色!重要; }
3. 将您的特殊css放在媒体屏幕块中.