打印样式表困境 - 寻求解决突出问题的建议

Question

我一直在努力让我们的一个网页地图以半个体面的方式打印出来，已经持续了几天了。我八天前发布了this question，但是此后我已经解决了那里概述的问题。现在我正在处理其他几个问题，但似乎无法解决。

首先，这里是我正在尝试打印的页面链接: http://maps.nps.gov/maps/rich/footstepsofhistory。

过去几天中，我已经尝试了许多不同的组合来处理浏览器的差异和缺陷，所以我确信我提出的解决方案远非完美。话虽如此，当前部署的解决方案产生了我到目前为止能够制作的最佳结果。

最令人沮丧的是我并没有寻求任何复杂的东西。我只想要我的打印样式表（我已经标记了已解决的项目）：

1. 隐藏所有不必要的元素。
2. 调整地图大小，使其填满整个页面，减去顶部 70px 的标题栏。它应该能够自适应任何打印尺寸。
3. 显示一个绝对定位的 div，居中显示当前选定点的属性，距离页面底部 15px。

以下问题仍未解决：

1. 我在地图 div 中硬编码了高度为 760px。我更喜欢使用 height:100%;，但这似乎是防止某些浏览器将地图溢出到第二页的唯一方法。
2. 当未点击点时，地图“遵守”760px硬编码高度。然而，在点击点后，地图在某些浏览器中以约50%的页面高度打印出来。这个我无法解释。
3. 最大的问题是在 Internet Explorer 8 上。地图始终在打印时溢出到第二页。我已经尝试了我所想到的一切方法来解决这个问题，但没有找到任何解决方案。

测试过的浏览器：

• 在Mac OS X上使用Safari：一切都完美。
• 在Mac OS X / Windows上使用Chrome，在Mac OS X / Windows上使用Firefox，在Internet Explorer 7上：在未点击点之前打印，页面会正确地打印 - 除了由于硬编码div高度而导致地图未完全占据页面的高度。单击点后打印会将地图在打印输出中调整为打印区域高度的约50％。
• 在Internet Explorer 8上：在单击地图上的点之前和之后打印，会导致地图从第一页溢出到第二页。
• 在Internet Explorer 9上：在单击地图上的点之前和之后打印，会将地图在打印输出中调整为打印区域高度的约50％。

我考虑过将Internet Explorer强制转换为IE7模式作为解决方法，但是似乎所有我看到的问题都应该可以解决，并且当使用X-UA-Compatibile标签时，我感到不舒服。这也只能解决剩下的两个问题之一。肯定有更好的方法！？！？

最后，我知道我可以创建页面的PDF，但如果可能，我真的想避免这样做。

感谢您能提供任何帮助，如果需要，我可以在此处发布更多信息。

- Nate Irwin

---

我知道你说过“我知道我可以创建页面的PDF，但我真的想避免这种情况”。对我来说，这种类型的内容（一个精美设计的地图）值得制作成PDF。 - Jason Gennaro

@Jason：也许只有我这样想（我可能错了！），但作为用户，您是否更喜欢直接点击打印按钮，而不必通过Adobe Reader呢？难道我太“守旧”了吗？ - Nate Irwin

那是我的偏好。但如果我能保证打印出来的效果符合我的要求，我也很乐意使用PDF格式。更糟糕的是，当你想要打印一张地图时，它被裁剪了，然后你需要将其复制粘贴到一个新文档中再次打印。 - Jason Gennaro

我认为有时候我们对于“纯粹”的解决方案的渴望会导致我们不够用户友好。我自己也犯过这种错误很多次。 - Jason Gennaro

Answer 1

经过数天的苦思冥想，我终于成功解决了打印问题，而不需要太多的hack。

基本上，我改变了我的思路和方法。以前，我试图寻找适用于所有浏览器的解决方案，但现在我决定一次只专注于每个独立的浏览器。我从创建一个Internet Explorer特定的打印样式表开始，并且只在用户使用IE浏览器时加载它：

<!--[if IE]>
    <link rel="stylesheet" type="text/css" media="print" href="/css/rich/footstepsofhistoryprint-ie.css" />
<![endif]-->
<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" media="print" href="/css/rich/footstepsofhistoryprint.css" />
<!--<![endif]-->

接着，我开始致力于使Internet Explorer正常工作的打印功能。经过一些微调之后，我意外地添加了以下内容到IE打印样式表中：

html,body {margin:0 !important;padding:0 !important;}

这解决了IE 7、8和9的问题。我不确定为什么我必须在打印样式表中再次设置这些样式，因为它们已经在另一个样式表中设置过了，应该在打印时应用：

<link rel="stylesheet" type="text/css" media="all" href="/css/rich/footstepsofhistory.css" />

但很明显它们由于某些原因没有被正确应用。

然后一切都很容易。我只需要对非IE打印样式表进行一些微小的修改，使其能够在Chrome、Firefox和Safari中正常工作，然后就完成了。

以下是一些经验教训：

• 尽可能保持打印样式表的简单。
• 如果你遇到奇怪的布局问题，请创建一个特定于Internet Explorer的样式表以保持理智。如果必要的话，为每个版本的Internet Explorer创建打印样式表。我相信在某些情况下，这是使所有浏览器正常打印的唯一方法。
• Chrome是目前最好的“实时”CSS编辑工具。如果你正在寻找一种工具，可以在你进行CSS更改时动态预览，那么选择Chrome。

- Nate Irwin