纵向模式下的媒体打印问题答案

【问题标题】：Media print issue in in portrait mode纵向模式下的媒体打印问题
【发布时间】：2017-04-28 18:28:32
【问题描述】：

我有这张表格，我打印出来是为了完成我的工作。

现在的问题是，在纵向模式下，它被最小化了，我的意思是它看起来很小，就像 A4 Letter 的一半页面，而在横向模式下它看起来还不错。

这是我的媒体打印 css：

@media print  {
textarea{
        border:none;
    }
textarea#difekti {
padding-bottom:40px;
border:none;
    }
#menu-home { display:none }
#status-print { display:none }
#submit-f {display:none};
#MainContent {
    display: block;

}
#tab1 table, td, th {
  border: 1px solid red;   
}

#tab1 thead {
  float: left;   
}


#tab1 thead th {
  display: block;   
  background: yellow;
}

#tab1 tbody {
  float: right;   
}
#programi {
    display:none;
}
#kursor {
    display:none;
}
#adresa { }
* {position:static !important;}

}

有什么建议吗？此外，我也有 IE 的问题。我可以为 IE 创建额外的媒体打印吗？谢谢

【问题讨论】：

标签： css printing print-style

【解决方案1】：

您应该将其更改为单独的 CSS 文件，并使用任何 CSS 链接最底部的 media="print" 将其链接到您的 HTML 文档。

<link rel="stylesheet" type="text/css" media="print" href="path/to/your/css" />

这也将帮助您避免 IE 的问题。

【讨论】：

我在所有开发过程中都这样做，它可以帮助我进行维护，也是一种最佳实践。相应地，@media print {} 出现在 CSS3 中，这样后面的 IE 就不会渲染它了。

【解决方案2】：

@page CSS at-rule 用于在打印文档时修改某些 CSS 属性。您不能使用 @page 更改所有 CSS 属性。您只能更改文档的页边距、孤立点、窗口和分页符。更改任何其他 CSS 属性的尝试将被忽略。

@page { size:5.5in 10in; margin: 1cm }