2

我的公司正在使用 print.css 进行打印。此外，我们还有另一个 style.css 覆盖任何其他 .css 文件，包括 print.css。出于某种原因，当来自 html5 样板（位于覆盖文件中）的@media 打印查询打开时，IE8 和 IE9 正在打印空白页。当它被注释掉时，没有问题。这里有什么问题？我们想留下样板文件中的@media 打印。

打印.CSS

@media print
{
body *
{
    visibility:hidden;
}

#basicShell #main,
#basicShell #main *,
.basicShell_container .content,
.basicShell_container .content *,
#mainShell_container .center_columnContent,
#mainShell_container .center_columnContent *
{
    visibility:visible;
}

#basicShell #main,
.basicShell_container .content,
#mainShell_container .center_columnContent
{
    position:absolute;
    left:0;
    top:0;
}
}

STYLE.CSS（覆盖一切）

@media print {
* { background: transparent !important; color: black !important; text-shadow: none    
!important; filter:none !important; -ms-filter: none !important; float: none 
!important;} /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /*  
Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
4

3 回答 3

6

我在 HTML5 Boilerplate 中遇到了同样的问题。

就我而言，它原来是这一行：

tr { page-break-inside: avoid; }

这导致了 IE8/9 中的空白页。该页面在标签中包含大量内容（超过一页的价值），IE 决定通过跳过页面并切断内容来处理它。呸。

为了避免弄乱 HTML5 样板，我在自己的样式表中添加了以下内容，问题就解决了：

tr { page-break-inside: auto; }

您的问题可能是由不同的标签引起的，因此请检查设置 page-break-inside 属性的任何内容。

于 2012-09-14T01:02:46.240 回答
1

您必须考虑在您的站点中加载样式表的优先级。目前，您在print.css样式表上有这样的说明：

body * {
    visibility:hidden;
}

该规则基本上隐藏了文档中的“一切”。您提到styles.css样式表应该覆盖所有内容，但是样式表以什么顺序加载到您的标题中？如果 print.css 工作表在 style.css 工作表之后，那么第一个规则就会生效。

您的链接参考中包含的类型也有这种情况media，我不知道哪个具有更好的优先级；链接媒体类型或媒体查询。

于 2012-08-24T14:37:24.680 回答
1

The first rule in print.css makes all subelements of body invisible. The intent appears to be to turn some elements to visible, but apparently this fails, perhaps because the markup (which was not disclosed) does not use id and class attributes in the intended way.

于 2012-08-24T14:33:59.240 回答