当在IE8中打印时，HTML5元素会丢失CSS类

我已经要求在IE8中支持合理的漂亮打印。今天我遇到了一个使用HTMl5功能（部分）和CSS的页面的问题。该问题仅在打印时发生。看下面的例子，它应该生成一些带下划线的文本。这工作正常。但是打印时，不会加下划线。这可以通过将“部分”更改为“div”来“固定”，但出于各种原因，我宁愿不这样做。当在IE8中打印时，HTML5元素会丢失CSS类

有没有人有任何建议？在打印预览中，这似乎不是执行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>

来源

2012-09-11 Dan

我注意到与Modernizr相同的行为，它需要添加特定的打印匀场脚本。不确定您的兼容性脚本是否可能需要相同的？ –

顺便提一下，你错过了doctype ... – BoltClock

我花了好几天的时间试图找出为什么IE8不尊重我为打印介质设置的样式。我想因为我已经包含html5-shiv和css以将html5元素映射到块元素，所以它将按预期工作。不，不是IE8。最后，发现这篇文章，导致了modernizr打印支持shiv。谢谢 – Raghav

不要使用子类调用。直接调用.SigLine。

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

来源

2012-09-12 06:35:27 ZombieCode

感谢您的建议，但我在原始文章中提到“如果我没有'.SigLine'嵌套在'.Signature'内，它在打印预览中工作正常。”在这个小例子中，显然不需要链接CSS类，但是在一个真实的系统中，这是一个不切实际的约束。 – Dan

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

谢谢，Tim。

来源

2012-09-12 15:47:02 Dan

必须包含这个标记的HTML代码，并创建一个CSS文件称为打印，这之后你必须写在IE8的特定CSS代码，这就是所谓的@media打印查询

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

和请注意，HTML5shiv在打印时不支持IE8，以便在IE8中正确打印，您也必须在文档中包含html5shiv.print。你可以从Modernizer website得到它，你可以使用这个html5shiv print从Github

来源

2014-04-01 13:14:30 Hbirjand

当在IE8中打印时，HTML5元素会丢失CSS类

回答

相关问题