@media print不会覆盖主要样式

Question

在我的页面中,我有一个左侧边栏和一个容器,容器有一个边距左边,因为侧边栏是绝对定位的.

现在打印我隐藏侧边栏并恢复容器的左边距,但边距没有恢复.

这些是我的容器和侧边栏的样式:

#sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200px;
}
#container {
    margin-left: 200px;
    padding: 20px;
    transition: margin-left .5s;
}

@media print {
    #sidebar { display: none;}
    #container {
        margin-left: 0px !important;
        padding: 0px !important;
    }
}

我正在使用Chrome 40.

Answer 1

奇怪的是,通过删除print媒体查询中的转换,可以在Chrome中解决此问题:

这里的例子

@media print {
    #sidebar { display: none;}
    #container {
        margin-left: 0px !important;
        padding: 0px !important;
        transition: none;
    }
}

在不删除转换的情况下,您可以在此处重现此问题.也许这是一个渲染错误？