为什么我不能准确地打印网页？答案

【问题标题】：Why can't I print a web page accurately?为什么我不能准确地打印网页？
【发布时间】：2012-06-04 19:00:27
【问题描述】：

给定下面的 HTML 代码，为什么当这个文档在不同的浏览器中打印时会得到完全不同的结果？我想要的只是能够从一个打印到已知比例的javascript网络应用程序生成一个“页面”！看起来很简单，但到目前为止几乎不可能实现。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <svg width="210mm" height="297mm"
        xmlns="http://www.w3.org/2000/svg" version="1.2">

        <rect x="300" y="300" width="1in" height="1in" fill="red"/>
        <text x="100" y="100" font-size="1in">Hello</text>

    </svg>
</body>
</html>

【问题讨论】：

您能评论一下它们的表现有何不同吗？我可以想象+/- 10 左右像素的差异。第一个回复：coderanch.com/t/131257/gc/Relation-between-pixel-cm-mm 可能会提供更多见解。
根据浏览器的不同，它们可以精确地打印出 1"，或者大约 1.15" 或 0.9"。

标签： css html printing

【解决方案1】：

不同的浏览器在应用打印样式时可能会有所不同。

如果您想在不同浏览器中获得一致的结果，请定义您自己的打印样式。

像这样：

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

编辑：一些关于如何达到良好打印效果的链接：

What are most useful media="print" specfic ,cross browser compatible css properties? -> 链接到通常有非常好的文章的 List Apart

How to get cross browser compatibility in Print on page from all browsers?

【讨论】：

Christoph（和 Pier！）的洞察力太棒了，我不知道......我现在就试试看，希望这将是我印刷祈祷的答案！哈哈。因为我只是想删除他们可能添加或可能不添加的任何样式，有没有一种简单的方法可以做到这一点？
我不确定我在 *.css 中看到的任何内容是否有助于一致地打印出上述内容；我可以看到它如何与高度复杂的网页一起使用，允许您更改字体/大小/背景颜色等。但是对于这个特定的示例，我看不出它如何使 SVG 保持一致。
@Siyfion 您可以为您的 SVG 定义 css 样式，然后在打印时应用这些样式。此外，如果您定义 svg 的 viewPox，它可能会有所帮助。
再次感谢，缺少 viewBox 很可能增加了我们遇到的问题！

【解决方案2】：

您可能需要为打印创建不同的样式，具体取决于您的浏览器。（media="print" 在你的 CSS 声明中）

看这里：

http://www.css-help.com/css-mediaprint.htm

http://www.w3.org/TR/CSS2/media.html

【讨论】：