浏览器另类比拼——比比打印效果

[放这不算错版吧]

一句前言：现在浏览器比速度比跑分比多了，总该比点别的什么了。
一句注意：这测试只是呈现客观事实，所有结果没有刻意营造，同时由于只是一次式测试，不能以结果说明全面的事实。
一句名言：眼见为实、实践为先。

好，上菜。此次测试使用的是苹果 Safari 浏览器的默认主页，地址为
【http://www.apple.com/startpage/】
之所以用这页是因为顺手，因为第一个测试的浏览器是 Safari，而且该页基本上刚好能用一张 A4 纸完全打印。
测试方式为用浏览器打开测试页面，静候载入完成，然后使用浏览器的打印命令和默认打印设置，用 PDFCreator 的虚拟打印机以相同输出设置打印出 PDF 文件，以 Adobe Reader 9.3.3 打开 PDF 文件的效果截图作为用于对比的样本。其中截图以固定的宽度截取，故截图中显示的部分相当于页面打印在 A4 纸上的样子。

首先列一个全家福：
【全家福图】

基本情况就是，测试页面的渲染所有浏览器都一致（要提醒的是，部分图片不同是因为页面存在轮换图片的情况，例如导航栏下的四个新品介绍图；另外也有些 CSS3 属性例如圆角边框在 IE 中表现不出来；于打印效果也是），但是打印效果方面所有浏览器都不约而同地“不忠于”显示效果而忽略掉一些地方的背景图片**——这个可能是为了保持打印页面的可读性（可以见到一些地方的白色字也变成黑色打印了）；但是都把页面顶部的导航栏、页面底部的页脚信息去掉，这个就比较难以明白了。
**【多谢 aaaa007cn 的提醒，这些“不忠于”显示效果的打印效果——于测试页面来说就是导航栏、页脚隐藏，白字反黑——实际上是网页自身的样式表所决定的。】

然后开始按顺序评比。

Internet Explorer 8 x32 for Windows7
【IE图】

打印效果中规中矩，没有什么可以挑剔的地方，就是输出较小，这是其默认的页边距比较大的原因。网页中是文本的地方在 PDF 中都可以以文本的方式选中，表示这些文本就是文本输出打印的，这点比较好（不是当然的吗？嗯嗯，看下去吧）。唯一让人不爽的地方在于，其他浏览器输出时都能将网页标题传递给 PDFCreator 使之自动以网页标题命名 PDF 文件，唯有 IE 是将网址替换掉不能用于文件名的字符后的结果传递给 PDFCreator 的——但这点究竟是好还是不好呢？

Firefox 3.6.6 (tete009 sse2 编译版)
【Firefox图】

效果基本上跟 IE 一样（多了阴影和圆角），如何，很完美是吧？NO！——整个页面打印出来的地方仅有 iTunes Preview（也就是页面下三分之一部）处的文本是可以选中的，其他地方完完全全是图片**！尽管可能有人觉得，即使是图片，分辨率也足够高，没什么问题啊；但是，既然能以文本打印，为什么偏偏有些地方是文本有些地方是图片呢？这样做有何好处呢？（用 Firefox 3.5.10 官方版试验，打出来的效果完全一样。）
**如果在“页面设置”中把打印背景选上，则整个页面都变成以图片打印了（不过除了页顶页底之外整个页面都忠于显示效果）。

Opera 10.10.1893
【Opera图】

上三分之二的效果还算正常，中部的边框全没了是因为 Opera 不能渲染那些私有 CSS 属性，下三分之一的地方却没有按照浏览器的“惯例”去掉背景图和反色处理文字了（仔细看看，上部四幅图片下面的一行也有地方有这个现象），而且文字行距、图片位置都出现了严重走样，Opera 于是成了唯一一个用了两张 A4 纸的浏览器。欣慰的是，页面中是文本的地方还是文本。
【由 aaaa007cn 特别提醒，两张 A4 纸这不是 Opera 的问题，只是其默认设置是“适合纸张宽度”——这个选项跟“缩小到适合页面”是不同的——也就是保持原网页内容大小而将东西都塞入页面宽度范围内造成的，去掉这选项就没问题了**。同样背景图片的情况也是 Opera 跟其他浏览器不同的默认选上“打印页面背景”造成的。】
**“没问题”指的是将内容都打在一张 A4 纸上了，但页面右边有大约几十像素的内容会超出打印范围而无法呈现在纸上。Opera 提供了一个缩放选项，但已经没有自适应的选项了，还没提供让你自己填合适数字的机会，能够选择的缩放比例中，比“100%”小的下一个就已经是“80%”了。

Chromium 6.0.415.0 (48035)
【Chrome图】

没错，是 Chromium 而不是 Chrome，好像骗了你，但这有什么区别呢？
整体效果尚可，跟 Opera 一样中部边框全丢了——然而跟 Opera 不同，Opera 根本不能显示边框，而 Chromium 可是可以显示的！！——除此之外文本还是文本。
另外 Chromium 不提供任何页面设置选项。

Safari 5.0 (7533.16)
【Safari图】

这就是 Safari。跟 Apple 一向的作风一样，大胆而独树一帜，但并不是夸奖。图片大量缺失、低分辨率全图片输出、而且不提供任何页面设置选项，Safari 就这样干脆利落地将苹果的铬质招牌砸个面目全非——这又有什么所谓，将 Safari 这个世界上最棒的浏览器用在 A4 纸上就是你的使用方法不对。

＝＝＝＝
文中图片、原始大小全图片、PDF 下载：
http://cid-2ae5ce0f39c0d1c2.office.live ... x/.Public/浏览器打印对比
＝＝＝＝

－→在这里说明一下，PDF 下载中的文件开头为打印输出的默认文件名，其后一个空格，然后跟着浏览器的首字母，例如“c”是 Chromium。其中 Opera 和 Firefox 都标注了版本号；Opera 10.60 的有两个，标“a”的为第一次打印结果，可能是源于我按打印后就关闭 Opera 的缘故，标“b”的是第二次打印结果，打印出 PDF 文件前一直没关闭 Opera。

为什么不在这里列出 Opera 10.60 最新版？因为它按默认设置打印仍然要占用两张 A4 纸（包含在上面 PDF 下载中）；而去掉“适应纸张宽度”这个设置之后，打印效果也与 10.10 一致。

＝＝＝＝
再说说打印预览。（浏览器的版本号皆如上，除非特别说明）

【IE打印预览】

IE 的打印预览功能是最棒的，所有按钮一应俱全，甚至比 Word2003 的功能还要强大。比较特别的是预览是在一个新窗口中打开，所以对浏览的毫无干扰。不过问题在于按钮都没有文字标识，操作视图和操作打印选项的按钮排列混在一块，所以上手会比较麻烦。

【Firefox打印预览】

Firefox 在进入打印预览后会将标签栏隐藏，把整个浏览器窗口作为打印预览窗口来显示，这样对单窗口浏览的使用者来说可能会有不便。操作打印选项的按钮俱全，但没有操作视图的按钮，也没法通过 Ctrl+滚轮缩放视图，这方面比较缺陷。

【Opera打印预览】

为什么我要截整个窗口的图呢？因为在 Opera 10.60 的默认打印设置的打印预览中，我无论用滚轮还是直接拖动滚动块，在滚动到这个位置就无法滚动下去了；而 Opera 10.10 在同样设置下没有这个 Bug。然后大家可以看到，没有任何按钮——因为 Opera 的打印预览只是相当于一种样式模式，你仍然能够点击打印预览中的链接进行浏览（奇怪的是不是所有链接都奏效），仍然能够用 Ctrl+滚轮进行缩放，也因此只能够回到菜单中取消打印预览模式，只能够从菜单中调整打印选项。

Safari 和 Chrome 都没有打印预览功能。

我们看到图片啊

目前好像仅有Firefox有加强打印效果的扩展提供，比如smartprint等。

有点意思，打印也是经常用到的功能之一

Opera 10.70 win build 3452
菜单 File -> Print Options... 中去掉 Fit to paper width 再打印就和其他浏览器一样
去掉 Print page background 就不会打印背景色
我想 Opera 其他版本也应该一样

所以，请收回

hzhbest：为什么不在这里列出 Opera 10.60 最新版？因为它仍然要占用两张 A4 纸（包含在上面 PDF 下载中），而且还表现得比老一辈差。这就是速度的代价？回到原帖

这句话

至于你说打印结果和页面显示不同
一般来说，正规的网站都针对屏幕显示和打印的 css 会有些不同
比如苹果这个就是在 http://images.apple.com/global/styles/b ... module.css 中定义了

/* PRINT */
@media print {
	body, #main, #content { color: #000 !important; }
	a, a:link, a:visited { color: #000 !important; text-decoration:none !important; }
	#tabs, #globalheader, #globalfooter, #directorynav, .noprint, .hide { display: none !important; }
	#main a.pdf, #main a.html, #main a.qt, #main a.ical, #main a.dl, #main a.dmg, #main a.zip, #main a.keynote, #main a.audio { padding-left: 0 !important; background-image: none !important; }
}

很少用到打印功能呀

aaaa007cn：Opera 10.70 win build 3452
菜单 File -> Print Options... 中去掉 Fit to paper width 再打印就和其他浏览器一样
去掉 Print page background 就不会打印背景色
我想 Opera 其他版本也应该一样回到原帖

没错，这样的设置可以让 Opera 的打印效果“好看一点”。Opera 的打印默认设置跟其他浏览器都不同，而且没有缩小到适合页面的选项，这样的设计看来不如其他浏览器。
我会添加说明，但不会收回那句话。

[quote="aaaa007cn"]至于你说打印结果和页面显示不同
一般来说，正规的网站都针对屏幕显示和打印的 css 会有些不同
比如苹果这个就是在 http://images.apple.com/global/styles/b ... module.css 中定义了[/quote]
这个我明白了，谢谢。

那么继续

上三分之二的效果还算正常，中部的边框全没了是因为 Opera 不能渲染那些边框

Beautiful UI styling with CSS3 text-shadow, box-shadow, and border-radius
从 Opera 10.50 开始支持 box-radius、box-shadow
Opera 10.10 不支持这两个属性

至于 Opera 10.50 以后也“看不到”边框，原因在于 apple

http://images.apple.com/startpage/styles/startpage.css

.box { border:1px solid; border-color:#e5e5e5 #dbdbdb #d2d2d2; background:#fcfcfc; -webkit-box-shadow:rgba(0,0,0,.5) 0 1px 2px; -moz-box-shadow:rgba(0,0,0,.5) 0 1px 2px; }

有 -webkit-box-shadow，有 -moz-box-shadow，唯独没有 css3 的 box-shadow

实际上，边框是存在的

.box { border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; -khtml-border-radius:3px; }

Opera 10.50 认识 border-radius

给此网页添加 user css，内容为：

.box:nth-child(n){box-shadow: 0 1px 2px rgba(0,0,0,0.5)!important;}

即可验证


[quote="hzhbest"]“没问题”指的是将内容都打在一张 A4 纸上了，但页面右边有大约几十像素的内容会超出打印范围而无法呈现在纸上。[/quote]
还是在 Print Options，修改 Scale print to 为 70%

如果说 Opera 的打印默认设置不合理、不科学、不人性化，我可以理解

可非要说 Opera 10.60 表现比 10.10 还差……

不关阴影的事。用 10.60 的 DragonFly 来看，它在 .box 的样式中边框宽度为 0 的项都标有“[overridden]”的字样，最后剩下的边框宽度样式为“medium”，但“计算样式”中却显示边框宽度为“0”。这是 Bug 吧？其他浏览器都能显示边框。难道 Apple 故意让 Opera 显示不正常？
【此处说法有误。楼下下下改正】

http://images.apple.com/startpage/styles/startpage.css

.box:nth-child(1n) { border:none; } /* reset for smart browsers */

因为这一条在起作用
既然提到了 Opera Dragonfly
那就顺便再说一下
你试试用 Google Chrome 的 Developer tools、Firefox 的 DOM Inspecter 看 Computed Style 的结果

如果还不认为是阴影的原因，给 Firefox 添加一条 user css 把 .box 的阴影去掉再看看结果如何？

.box {-moz-box-shadow:none!important;}

前面说法有误
确切地说，边框本身根本不显示
“看起来”有边框，完全是因为边框之外有阴影

aaaa007cn：前面说法有误
确切地说，边框本身根本不显示
“看起来”有边框，完全是因为边框之外有阴影回到原帖

原来如此，我明白了，多谢解释！
测试页面的 CSS 文件中那几行“reset”就是为了在浏览器能显示阴影时去掉边框，结果因为 Opera 认识“nth-child”这种伪类但又不支持惯用的阴影私有样式，所以就显示不出来。

在这里说一下暂时结论，最终结论需要像 aaaa007cn 这样的网友勘误后才能得出。
－－－－
打印效果没有最佳，只是看用户需要的是网页上的文字还是完整的网页；前者的话 IE8 就足够好了，因为提供了顺手的功能可以从打印预览中操作；后者的话首选还是 Firefox，因为即使使用默认设置也能比较完整地还原页面，而且在样式支持上全面（所不支持的动画样式打印用不到）。