css - 有没有办法在每个浏览器上打印相同的网站？

Question

我有一个仅包含文本（字体大小和字体系列）的网站。字体大小以 mm 为单位，使用的字体为 Times New Roman、Arial 和 Courier New。

当我在所有主流浏览器中打印网站时，每个浏览器都会做其他事情。我关闭了缩放功能。

我做错了什么还是不可能有一个（非常）简单的网页在每个浏览器的纸上看起来都一样？

score 1 · Accepted Answer

对于打印，您可以设置浏览器仅在打印时使用的特定样式表 - 这里有一些很好的资源：

a:link:after { content: " (" attr(href) ") "; }

那里有一些媒体查询的使用，但是包含特定样式表以进行打印的基本方法是这样的：

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

好的做法是尽可能多地去掉文章周围的内容，只给用户他们想要的东西——简单的样式也更容易在浏览器中工作。

score 1 · Accepted Answer

在一天结束时没有。你可以接近它，但它不一定是一样的。

编辑：

既然我投了反对票，让我解释一下：没有保证可以做到这一点。每个浏览器和版本都会有所不同，并且无法保证网页在每个浏览器中的外观或打印效果都相同。

score 0 · Accepted Answer

首先添加一个“reset css”以将所有浏览器设置为一个共同的起点。搜索“reset css”应该提供多种。

score 0 · Accepted Answer

关于您的评论并作为部分答案，请始终仅使用免费字体。例如Times New Roman不是（作为一个 linux 用户我没有它），应该首选 Liberation Serif（就像 Arial 应该被 Liberation Sans Narrow 取代）。

要在字体方面获得更多风格自由，您可以使用Google Fonts。

另请注意，在浏览器显示和打印中，您的表单中不可能有完全相同的输入。

当我想要一个完全符合您需要的打印版本（包括关于分页）时，我添加了一个链接来构建我的页面的 PDF 版本。

score -1 · Accepted Answer

当我们需要一个用户将打印的页面时，我们必须制作一个完全独立的 html 文件，该文件使用旧的基于表格的布局 a reset.css，并且仍然存在一些差异（例如 Chrome 中的边距比 IE 上的小）。它很丑（主要是因为基于表格的布局），但是这样尺寸和布局至少是相同的。

5 回答 5