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

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
• 使用alert()内部window.matchMedia('print')侦听器使用Javascript

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

Answer 1

这是因为在@media打印时，浏览器无法解释转换代码 您只需添加以下内容即可解决问题：

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