Question

我需要为IE7 +实现像素完美标记。我遇到的问题如下：字段宽度在网页视图和打印预览中有所不同。请参阅以下示例：

<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>

这里的输入字段可以包含95个字符，但是当我打印它时，它只显示91个字符。使用不同的宽度和CSS设置，我得到的差异是一行中最多10个字符。

有没有办法以某种方式解决这个问题并确保我在浏览器中看到的页面打印的内容会相同？

Answer 1

要在屏幕上显示相同宽度的线条并在纸张上打印，应指定以厘米或英寸为单位的宽度，而不是以像素为单位。

Answer 2

适合打印介质中某一行的字符数取决于纸张尺寸，纸张方向和边距。您无法在HTML或CSS中控制它们。（IE中不支持CSS3中的@page项。）

它还取决于字体，因此如果您需要像素完美，请将font-family设置为特定字体（不是monospace，这取决于浏览器设置）。

任何不适合印刷线的东西通常都会被忽略。

Answer 3

我认为您正在寻找'size'属性： W3School link

但要检查打印时它看起来有什么不同，你必须考虑整个样式表。打印布局也有不同的媒体查询。也许您可以调整打印布局看起来与普通布局相同。

网页上的不同字段宽度和IE7 +中的打印预览

3 个答案: