无法更改打印介质的元素宽度

Question

假设屏幕媒体中有两列并排放置。两列都有transition: width .1s;（可以适应任何延迟）。现在的任务是更改打印介质的宽度。从 Google Chrome v35 开始，我必须使用变通方法才能实现。

让我给你看一个例子（你可以查看实时示例：http://jsbin.com/faxow）

HTML：

<div class="column eight">Lorem ipsum</div>
<div class="column four">Lorem ipsum</div>

CSS：

.column { float: left; transition: width .1s; }

.eight { width: 66.66667%; }
.four { width: 33.33333%; }

@media print {
  .eight, .four { width: 100%; }
}

这不会将width: 100% 应用于 Google Chrome（至少 v35）中印刷媒体中的列，除非我：

• 将transition: width .1s 移动到@media screen {} 范围
• 完全摆脱transition: width .1s
• 在带有 Javascript 的 window.matchMedia('print') 侦听器中使用 alert()

有什么特殊原因吗？这是预期的行为吗？

Answer 1

这是因为在@media print 中，浏览器无法解释转换代码。
您可以通过添加以下内容来简单地解决问题：

@media print {
  * {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
  }
}