I need to implement a pixel-perfect markup for IE7+. The problem I have encountered is the following: the width of the fields differs in web-page view and in print preview. See the following example:
<html>
<style type="text/css">
.input_multiline {
border:0;
height: 30px;
padding-left: 10px;
padding-top: 10px;
border-bottom:1px solid black;
font-family: monospace;
font-size:13pt;
margin-top:10px;
}
</style>
<body>
<input readonly = "readonly" class="input_multiline" style="width: 960px;" type="text" value="012345679 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 95chr"/>
</body>
</html>
The input field here can hold 95 characters, but when I print it, it shows only 91 character. With different width and CSS setup the difference I got was up to 10 characters in a line.
Is there a way to somehow fix this and assure that the page I see in browser will be printed just the same?
To get lines of the same width displayed on screen and printed on paper one should specify width in centimeters or inches and not in pixels.