Css 正在忽略打印媒体查询和样式表

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

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

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

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

我不知道是否有可能在JSFIDLE中测试这些东西，但这里有一个。它至少会显示基本的代码结构

这里还有一个codepen版本，因为它可以将示例作为一个完整的页面查看。

非常感谢您的任何输入。

您的@media打印块需要放在样式表的末尾。其他规则，因为它们没有指定的媒体，同时适用于屏幕和打印，因此它们覆盖了您在CSS中声明的打印内容，同样特殊性的规则按照给定的顺序应用；在冲突的情况下，最新提供的规则仍然有效

---

这是答案。

好吧，如果你的保证金不能固定，也许你可以绝对定位，给它一个负保证金

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

---

我在我的应用程序上遇到了类似的问题。我们还使用左边距从侧边栏定位页面内容。对于移动设备上的offcanvas导航，页面内容也有CSS转换。我们可以通过删除打印媒体查询中的转换来修复它

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

---

感谢您的快速回复，但在我的网站上仍然不起作用。我必须有一些其他冲突的风格，虽然3个小时仍然没有产生任何结果。唉，我得挖得更深一点。再次感谢。它在单独的示例中有效吗？这可能是一个涉及外部样式表在站点上被调用的顺序的问题。另外，如果您有任何内嵌的css规则，那么这些规则将取代所有其他规则。@lax2tyone这个单独的示例似乎对我有用。这是一个全屏视图，您可以尝试在以下位置打开打印对话框：。也许你可以分享更多关于这与你的整个网站有什么不同的细节？是的，这些孤立的例子效果很好，这让我更加困惑。我的整个网站使用的是我的公司下载的主题，并将多个css文件合并成一个大文件。我拿出了我认为是示例问题所在的代码，但是还有14000多行css可能会产生干扰。对我来说，它似乎只是拒绝承认我的保证金变动，而只承认我的保证金变动。我可以让它改变字体大小或颜色，只是不能改变边距。我想这不是最好的方法，但现在对我有帮助。