2

我创建了一个包含数据表的页面，我希望它足够大以便在屏幕上舒适地查看，但是当它打印时我希望它缩小以适合页面但是当我更改表格的大小时， 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，例如隐藏导航链接等。

4

3 回答 3

2

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

于 2013-10-17T08:59:00.600 回答
1

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

http://caniuse.com/css-mediaqueries

希望有帮助

于 2013-10-17T08:59:04.523 回答
1

解决了这个问题，当改变它内部的宽度时，@media print{}不能覆盖适用于屏幕的常规 css 中存在的值，即使在!important它被调用时，我也将表格的 css 放在里面@media screen{}并且它工作。

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

（编辑）

在 Firefox 中，如果您希望某些内容以一种方式出现在屏幕上并以另一种方式打印，则您必须在屏幕上保留您的样式，@media screen{}如果您将其保留在正常的 css 打印样式中，则永远不会覆盖常规 css。例如，我在普通 css 中有这个，但是在打印时它在 Firefox 中被忽略了

.table6{
    float: left;  
}

所以我不得不这样说

@媒体屏幕{

.table6{
    float: left;
 }

}

于 2013-10-17T09:40:31.007 回答