All geek questions in one place

HTML5 elements lose CSS classes when printing in IE8

I have a requirement to support pretty nice printing in IE8. Today I ran into a problem with a page using some HTMl5 and CSS functionality (sections). The problem only occurs when printing. Considering the example below, it should generate some underlined text. It works great. But this is not emphasized in printing. This can be “fixed” by changing the “section” to “div”, but for various reasons I would prefer not to.

Does anyone have any tips? This doesn't seem to be a problem with javascript executing during the preview, because I can add a window.onload event to the page so that it populates the div with content, and this works fine in print preview. And plain CSS works fine when previewing prints; if I didn’t have a ".SigLine" nested inside a ".Signature", this would work perfectly in the preview. But it seems that the CSS class of the "Section" tag is somehow ignored, so the nested "SigLine" div does not consider itself a child of the "Signature" element.

Here is a complete working example.

<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 fine... --> <div class="SigLine" style="width: 400px;">I should be underlined...</div> </section> </body> </html>
+4
source share
3 answers

I would call Tim's comment above as an answer if he would let me, since he sent me to search for the Modernizr print layout, which led me to http://davidwalsh.name/html5-print , and then https: // github. com / aFarkas / html5shiv / blob / master / src / html5shiv-printshiv.js . By including the js file in my example, it solves printing problems in IE8. I am not sure if there will be any other consequences of using this shiva, but it seems to be regarding my specific problem.

Thanks Tim.

+6
source

you must include this tag in your HTML code and create a css file called print and after that you should write specific css code for IE8, this is called @media print query

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

and note that HTML5shiv does not support IE8 during printing, in order to print correctly in IE8, you must also include html5shiv.print in your document. you can get it from the Modernizer website and you can use this html5shiv print from Github

+1
source

Do not use the child class call. Just call .SigLine directly.

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

Source: https://habr.com/ru/post/1433663/

More articles:


All Articles