Currently, I am facing a challenge where I need to ensure proper printing functionality in IE8. The issue arises when using HTML5 features (such as sections) along with CSS on a page - the problem occurs specifically during printing. For example, when trying to generate underlined text, it appears fine on screen but not when printed. One solution would be to change 'section' to a 'div', but due to specific reasons, this is not ideal.
Seeking advice on how to tackle this issue. It seems that executing JavaScript during print preview is not causing the problem, as adding the "window.onload" event to populate a div works correctly in the print preview. Regular CSS also functions well in print preview; however, nesting ".SigLine" within ".Signature" does not work as expected. It seems like the CSS class for the "Section" tag is being ignored, resulting in the nested "SigLine" div not recognizing itself as a child of the "Signature" element.
Below 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"> <!-- Making this a <div> resolves the issue... -->
<div class="SigLine" style="width: 400px;">I should be underlined...</div>
</section>
</body>
</html>