媒体查询打印不适用于左边距

Question

在我的应用程序中，我有一个左侧边栏，我想在用户打印页面时隐藏它。

我正在使用以下媒体查询：

@media print {
    #left_sidebar, #backend_navbar, #flash-messages, #header_buttons, .object_social, a:after, .hide_on_print  {
        display: none !important;
    }

    #page-wrapper {
        background-color: #ffffff !important;
        margin: 0 !important;
    }
}

我隐藏了侧边栏，这可行，但取消包装上的左边距不起作用。

当我显示检查器并使用 chrome 和 opera 激​​活 css 打印的仿真时它可以工作，如果我按 ctrl+P 则它不起作用。

你知道我能做什么吗？

Answer 1

我假设您设置的原始css规则是“margin-left：50px”作为50px的示例。在您的媒体查询中尝试相同的方式，例如“margin-left：0”。我认为它在过去有效。可能不是最好的解决方案，但它可能会让你继续前进。

CSS

#page-wrapper { 
   margin-left: 50px; /* as an example */
}

@media print {
#left_sidebar, #backend_navbar, #flash-messages, #header_buttons, .object_social, a:after, .hide_on_print  {
    display: none !important;
}

#page-wrapper {
    background-color: #ffffff !important;
    margin-left: 0;    /** try without !important, if doesn't work, then add it back.**/
}

希望对你有所帮助。