@media print 不会覆盖主要样式答案

【问题标题】：@media print doesn't override main style@media print 不会覆盖主要样式
【发布时间】：2015-04-07 19:37:41
【问题描述】：

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

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

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

#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。

【问题讨论】：

标签： css printing media-queries

【解决方案1】：

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

Example Here

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

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

【讨论】：