css - 打印样式表 - Webkit 与 Gecko/IE 中的打印页面宽度不同

Question

在 Safari/Chrome 中打印下面的页面时，内容（基本上是页面上的所有内容）被挤压到页面的左侧，大约是页面宽度的 60%。

但是，在 FireFox 和 IE 7 中，打印的页面将内容显示为全宽（看起来很不错，imo）。我将所有布局元素的大小调整为 100% 宽度（使用 !important 确保它们正在应用），Safari/Chrome 仍然不会打印出整个宽度。

这是 Webkit（第一）与 Gecko（第二）之间区别的图像：（ _来源：_skitch.com_）

_{（来源：skitch.com）}

score 1 · Accepted Answer

抱歉，不是真正的答案，而是评论（我还不能发表评论）但是，您是否已经尝试过打印工作表？如果没有，那就试试吧。

另外，我检查了你的 print.css，虽然我不太确定，但也许你可以检查你的字体大小。尝试先使用像素而不是 em。由于 em 与您的基本字体大小相关，因此在浏览器中可能会有所不同。您可以通过在您的正文样式中添加固定字体大小来纠正此问题，如下所示：

body { font-size: 13px; }

然后继续为其他人使用 em。

score 1 · Accepted Answer

我决定不再尝试改进打印样式表，而是接受不同浏览器中奇怪的间距问题。

不过，我建议任何尝试为您的页面设置样式以进行打印的人，考虑在您的主站点样式表中使用 @screen 而不是 @all — 这使得在一些更复杂的布局上更容易为打印设置样式。

无论如何，我们应该进入 21 世纪，忘记印刷；-)

2 回答 2