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

时间:2014-07-14 18:27:00

标签: css google-chrome printing

假设两个列并排放置在屏幕媒体中。两列都有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

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

1 个答案:

答案 0 :(得分:3)

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

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