html - 媒体查询打印不适用于 margin-left

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.**/
}

希望对您有所帮助。