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

【问题标题】：Different field width on web page and in print preview in IE7+网页和 IE7+ 打印预览中的不同字段宽度
【发布时间】：2012-12-03 15:02:04
【问题描述】：

我需要为 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 个字符。

有没有办法以某种方式解决这个问题并确保我在浏览器中看到的页面将被打印出来？

【问题讨论】：

标签： html css internet-explorer internet-explorer-8 internet-explorer-7

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

任何不适合打印行的内容通常都会被忽略。

【讨论】：

【解决方案3】：

我认为您正在寻找“大小”属性： W3School link

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

【讨论】：

在 CSS 中设置 width 会覆盖 HTML size 属性。