在 IE8 中打印时 HTML5 元素会丢失 CSS 类答案

【问题标题】：HTML5 elements lose CSS classes when printing in IE8在 IE8 中打印时 HTML5 元素会丢失 CSS 类
【发布时间】：2012-09-11 21:10:22
【问题描述】：

我需要在 IE8 中支持相当漂亮的打印。我今天遇到了一个使用某些 HTMl5 功能（部分）和 CSS 的页面的问题。该问题仅在打印时出现。查看下面的示例，它应该生成一些带下划线的文本。这很好用。但是在打印时，它没有下划线。这可以通过将“section”更改为“div”来“修复”，但出于各种原因，我宁愿不这样做。

有人有什么建议吗？这似乎不是在打印预览期间执行 javascript 的问题，因为我可以将“window.onload”事件添加到页面以使其在 div 中填充内容，并且在打印预览中可以正常工作。并且普通的 CSS 在打印预览中可以正常工作；如果我没有在“.Signature”中嵌套“.SigLine”，它在打印预览中可以正常工作。但似乎“Section”标签的 CSS 类以某种方式被忽略了，因此嵌套的“SigLine”div 并不认为自己是“Signature”元素的子元素。

这是一个完整的工作示例

<html>
<head>
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <style type="text/css" media="screen,print">
        .Signature .SigLine{border-bottom:solid 1px #000} 
    </style>
</head>
<body>

<section class="Signature"> <!-- Make this a <div> and everything's fine... -->
<div class="SigLine" style="width: 400px;">I should be underlined...</div>
</section>

</body>
</html>

【问题讨论】：

我注意到 Modernizr 的行为相同，需要添加特定的打印填充脚本。不确定您的兼容性脚本是否需要相同？
顺便说一句，您缺少文档类型...
我花了几天时间试图找出为什么 IE8 不支持我为印刷媒体设置的样式。我想既然我已经包含了用于将 html5 元素映射到块元素的 html5-shiv 和 css，它将按预期工作。不，不是 IE8。最后，找到了这篇导致modernizr print-support shiv的帖子。谢谢

标签： css html printing internet-explorer-8 preview

【解决方案1】：

如果我愿意的话，我会将 Tim 上面的评论标记为答案，因为它让我去寻找 Modernizr 的打印垫片，这导致我去了http://davidwalsh.name/html5-print，然后是https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv-printshiv.js。通过在我的示例中包含 js 文件，它解决了我在 IE8 中的打印问题。我不确定使用这个 shiv 是否会产生任何其他后果，但它似乎确实解决了我的具体问题。

谢谢，蒂姆。

【讨论】：

【解决方案2】：

你必须在你的 HTML 代码中包含这个标签并创建一个名为 print 的 css 文件，然后你必须为 IE8 编写特定的 css 代码，这称为@media print query

<!--[if lte IE 8]>
<link rel="stylesheet" media="print" href="/print.css" type="text/css" />
<![endif]-->

请注意，HTML5shiv 在打印时不支持 IE8，为了在 IE8 中正确打印，您还必须在文档中包含 html5shiv.print。您可以从 Modernizer website 获取它，也可以从 Github 使用此 html5shiv print

【讨论】：

【解决方案3】：

不要使用后代类调用。直接调用 .SigLine 即可。

<style type="text/css" media="screen,print">
    .SigLine{border-bottom:solid 1px #000} 
</style>

【讨论】：

感谢您的建议，但我在原始帖子中提到“如果我没有将 '.SigLine' 嵌套在 '.Signature' 中，它会在打印预览中正常工作”。在这个小例子中，显然不需要对 CSS 类进行网络化，但在实际系统中，这将是一个不切实际的约束。