我有一个奇怪的问题，它似乎只影响 Chrome(在 Ubuntu 上的 Chromium 47.0.2526.73、Windows 上的 Chrome 48.0.2564.82 m、Ubuntu 上的 Firefox 43.0.4 中测试)，并且只在实际 打印预览(在开发人员工具中模拟打印媒体时不会出现此问题)。
我一直在尝试解决 GitLab 中打印样式的问题，页面左侧有一个不希望出现的间隙，如下所示。
现在，人们希望这是一个简单的解决方法。主容器元素有一个 230px 的 padding-left 为侧边栏留出空间，打印时需要为零。但是，我无法获得实际消除此填充的打印样式。
我已将其简化为最小测试用例，如图所示 here .我会使用就地片段，但当您尝试打印预览时效果不佳。我的示例源码如下:
<!DOCTYPE html>
<html>
<head>
<title>Print style problem demonstration</title>
<style type="text/css" media="all">
.page-with-sidebar {
background: purple!important;
transition-duration: .3s;
}
@media(min-width: 1199px) {
.page-sidebar-expanded {
padding-left: 230px;
}
}
</style>
<style type="text/css" media="print">
.page-with-sidebar, .page-sidebar-expanded {
padding-left: 0!important;
transition-duration: 0s!important;
}
</style>
</head>
<body>
<p>I have no left padding.</p>
<div class="page-sidebar-expanded page-with-sidebar">
<p style="color: white;">I should have no left padding when printed</p>
</div>
</body>
</html>
在这个例子中，我试图通过在打印样式中设置 padding-left: 0!important; 来消除打印时紫色 p 的填充。我已将问题隔离到 transition-duration: .3s; 样式，如果将其删除，问题就会消失。但是，设置 transition-duration: 0s!important; 不会成功覆盖它。
我已阅读 this thread ，这是我能找到的最相关的解决方案，但所描述的解决方案似乎对我不起作用(使转换仅显示屏幕，并添加其他 transition: none 行)。
一个有趣的进一步观察是问题也依赖于 @media(min-width: 1199px) 规则。如果删除它，问题也会消失。
我发现导致此问题发生的所有因素都无法在 GitLab 中轻易更改，即使可以更改，我也很想知道是什么导致了此行为。
是我做错了什么还是 Chrome 中的错误？
最佳答案
主要问题是过渡属性，您可以将其写入媒体检查以下 css，我也对此进行了测试并且工作正常。
<style type="text/css" media="all">
.page-with-sidebar {
background: purple!important;
}
@media(min-width: 1199px) {
.page-with-sidebar {
transition-duration: .3s;
}
.page-sidebar-expanded {
padding-left: 230px;
}
}
</style>
<style type="text/css" media="print">
.page-with-sidebar, .page-sidebar-expanded {
padding-left: 0!important;
}
</style>
关于html - 设置过渡持续时间后无法覆盖打印样式中的填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34914129/