Question

我的css中有@media print {...}的问题。我希望打印页面时左侧导航栏不显示。在打印时，我目前看到右边的原始图像，而我希望在中间看到原始图像：

    screen                  print              current print
|             |        |             |        |             |
|| n |   m   ||        ||     m     ||        |    |   m   ||
|| a |   a   ||        ||     a     ||        |    |   a   ||
|| v |   i   ||        ||     i     ||        |    |   i   ||
||   |   n   ||        ||     n     ||        |    |   n   ||
|             |        |             |        |             |

但是由于布局的方式，主要内容有一个余地，可以使浮动的左侧导航栏正确定位。这是因为我需要导航栏显示为整页高度。

我的浏览器似乎忽略了我的媒体查询，告诉它更改该边距。我甚至尝试过单独的打印css表，我得到了相同的结果。

我不知道是否有可能在jsfiddle中测试这些东西，但无论如何这里都是一个。它至少会显示基本的代码结构。 http://jsfiddle.net/mhguddf3/2/

这里也是codepen中的一个版本，因为它有一种方法可以将示例视为整页。 http://codepen.io/brandonkennedy/pen/Fkrcn

任何输入都将不胜感激。

Answer 1

您的@media print块需要放在样式表的末尾。其他规则，因为它们没有指定的媒体，适用于屏幕和打印，因此它们会覆盖您已经声明的打印内容（在CSS中，相同特殊性的规则按照它们的顺序应用＃39;重新给出;在冲突的情况下，最近提供的规则代表）。

这里是jsfiddle。

Answer 2

好吧，如果你的保证金无法修复，也许你可以绝对定位并给它一个负余量。

#printed-content{
 position: absolute;
 left: -230px;
}

Answer 3

我在我的应用上遇到了类似的问题。我们还使用margin-left来定位侧边栏中的页面内容。在移动设备上的offcan数据导航的页面内容上也有一个CSS转换。我们能够通过删除打印介质查询中的转换来修复它。

@media print { 
    #page-content { 
        transition: none; 
    }
}

打印媒体查询和样式表被忽略

3 个答案: