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规则为＆＃34; margin-left：50px＆＃34;作为50px的一个例子。在媒体查询中尝试相同的方式，例如＆＃34; margin-left：0＆＃34;。我觉得它过去很有用。可能不是最好的解决方案，但它可能会让你前进。

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

我希望有所帮助。

媒体查询打印无法使用margin-left

1 个答案: