假设两个列并排放置在屏幕媒体中。两列都有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 有特殊原因吗?这是预期的行为吗?
答案 0 :(得分:3)
这是因为在@media打印时,浏览器无法解释转换代码 您只需添加以下内容即可解决问题:
@media print {
* {
transition: none !important;
-webkit-transition: none !important;
-moz-transition: none !important;
}
}