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

时间:2012-09-11 21:10:23

标签: css html5 printing internet-explorer-8 preview

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

有没有人有任何建议?这在打印预览期间执行javascript似乎不是问题,因为我可以向页面添加“window.onload”事件以使其填充包含内容的div,并且在打印预览中工作正常。普通的CSS在打印预览中工作正常;如果我没有“.SigLine”嵌套在“.Signature”中,它在打印预览中可以正常工作。但似乎“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>

3 个答案:

答案 0 :(得分:6)

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

谢谢,蒂姆。

答案 1 :(得分:1)

您必须将此标记包含在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

答案 2 :(得分:0)

不要使用后代类调用。只需直接调用.SigLine。

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