IE从CSS Boilerplate打印空白页

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

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; } 
}

来源

2012-08-24 user1622874

在print.css的第一条规则使得body无形的所有子元素。目的似乎是将某些元素转为可见，但显然这失败了，也许是因为标记（未公开）不以预定方式使用id和class属性。

来源

2012-08-24 14:33:59

您必须考虑到正在您的网站中加载样式表的优先顺序。目前，您已在此说明的print.css样式表：

body * { 
    visibility:hidden; 
}

该规则基本上隐藏文件里面的“一切”。你提到styles.css样式表应该覆盖所有内容，但样式表按照什么顺序被加载到头文件中？如果print.css表单在style.css表单之后，则首先的规则将被采用。

也有你的链接引用中包含的media类型的情况，我不知道哪个具有更好的优先级;链接媒体类型或媒体查询。

来源

2012-08-24 14:37:24

此外，为什么该规则甚至被使用？你可以删除它，一切都会好的。 –

该规则隐藏了一切，以便您可以仅显示某些元素（例如，不想在打印中显示选择列表）。 – dudeNumber4

我遇到了与HTML5 Boilerplate相同的问题。

在我的情况下，竟然是这行：

tr { page-break-inside: avoid; }

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

为了避免与HTML5样板搞乱，我增加了以下我自己的样式，以及问题解决了：

tr { page-break-inside: auto; }

您的问题可能是由于不同的标签，所以检查任何设置页面级闯入财产。

来源

2012-09-14 01:02:46

谢谢阿农！这在Firefox中也很有效。 –

我有与引导3.3相同的问题。这固定它！ – NLV

IE从CSS Boilerplate打印空白页

回答

相关问题