打印样式表地狱 - 寻找解决突出问题的建议

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，但我真的希望尽可能避免这种情况。

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

Answer 1

在拔掉头发几天后，我能够正常打印，而不必过多地解决问题。

基本上，我是从改变心态和方法开始的。而在我试图提出一个适用于所有浏览器的解决方案之前，我决定开始一次关注每个单独的浏览器。我首先创建了一个特定于 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。