Question

我创建了一个包含数据表的页面，我希望它足够大，可以在屏幕上轻松查看但是当它打印时，我希望它缩小到适合页面，但是当我改变大小时表格，td和字体不起作用，代码在chrome中工作，但不在其他两个浏览器中。

@media print{

    .table6{
        page-break-inside: avoid;
        min-width: 500px;
        max-width: 900px;
    }

    .table6 td{
        font-size: 59.35%;        
    }

    .th7{
        max-width: 100px!important;
    }

    .th8{
        max-width: 28px!important;
        font-size: 58%;
    }
}

CSS可以使用print css，但仅适用于某些元素，并使用display: none等特定属性来隐藏导航链接等。

Answer 1

根据http://caniuse.com/#feat=css-mediaqueries，从IE9和Firefox 23.0开始支持CSS3媒体查询

Answer 2

无论您需要检查兼容性，我强烈建议：

http://caniuse.com/css-mediaqueries

希望有所帮助

Answer 3

解决了这个问题，当更改@media print{}内部的宽度时，它无法覆盖适用于屏幕的常规css中存在的值，即使调用!important也是如此我把我的桌子的css放在@media screen{}里面，但它确实有效。

因此，如果在其他浏览器中打印时，如果有任何人在更改宽度高度或大小时遇到此问题，请确保您的css分为@media print{}和@media screen{}，否则它将无法在IE或Firefox中使用。

（适用EDIT）

在Firefox中，如果你想在屏幕上以某种方式显示某些内容并打印另一个，你必须在@media screen{}的屏幕上显示你的风格，如果你把它保留在正常的css中，打印样式永远不会覆盖常规CSS。例如，我在普通的css中有这个，但在打印
时它在firefox中被忽略了
.table6{ float: left; }

所以我不得不这样说

@media screen {

.table6{ float: left; }

}

Internet Explorer和Firefox是否支持@media页面？

3 个答案: