IE 从 CSS Boilerplate 打印空白页

Question

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

打印.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; }
}

Answer 1

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

在我的例子中，结果是这样一行：

tr { page-break-inside: avoid; }

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

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

tr { page-break-inside: auto; }

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

Answer 2

print.css 中的第一条规则使body 的所有子元素不可见。意图似乎是将某些元素变为可见，但显然这失败了，可能是因为标记（未公开）未按预期方式使用 id 和 class 属性。

Answer 3

您必须考虑在您的站点中加载样式表的优先级。目前你已经在print.css 样式表中声明了这一点：

body * {
    visibility:hidden;
}

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

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