@media print 不会覆盖主要样式

Question

在我的页面中，我有一个左侧边栏和一个容器，容器有一个 margin-left，因为边栏是绝对定位的。

现在为了打印，我隐藏了侧边栏并恢复了容器的左边距，但边距没有恢复。

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

#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

奇怪的是，这个问题可以在 Chrome 中通过删除 print 媒体查询中的转换来解决：

Example Here

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

在不删除过渡的情况下，您可以 reproduce the issue here。也许这是一个渲染错误？

@media print 不会覆盖主要样式

@media print doesn't override main style

css

printing

media-queries