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



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

有人有什么建议吗?在打印预览期间执行javascript似乎没有问题,因为我可以将"window.onload"事件添加到页面中,让它用内容填充div,这在打印预览中很好。普通CSS在打印预览中效果良好;如果我没有在".Signature"中嵌套".SignLine",它在打印预览中会很好地工作。但是"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>

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

谢谢,蒂姆。

您必须在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网站上获得它,也可以从Github 使用这个html5shiv打印

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

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

最新更新