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中解决该问题：

Example Here

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

如果不删除转换，您可以reproduce the issue here。也许这是一个渲染错误？

@media print不会覆盖主要样式

1 个答案: