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

几天来，我一直在努力让我们的一张网络地图以半体面的方式打印出来。我八天前发了帖子，但后来一直围绕着上面概述的问题工作。现在我正在处理一些我似乎无法理解的其他问题

首先，这里有一个指向我要打印的页面的链接：

在过去的几天里，我尝试了很多不同的方法来处理浏览器的差异和缺陷，我确信我提出的解决方案还远远不够完美。也就是说，目前部署的解决方案产生了迄今为止我所能产生的最佳结果

最令人沮丧的是，我没有寻找任何复杂的东西。我只希望我的打印样式表（我已经标记了所有需要处理的项目）：

隐藏所有不必要的元素

调整地图大小以填充整个页面，减去顶部的

70px

高标题。无论打印大小有多大，它都应该调整大小

显示绝对定位的div，该div显示当前选定点的属性，该点在页面上水平居中，并从底部向上显示

15px

以下是仍然存在的问题：

我正在将map div的高度硬编码为

760px

。我更喜欢使用

height:100%我这样做是因为在某些浏览器中，这似乎是阻止地图溢出到第二页的唯一方法

当在点击点之前打印地图时，地图会“尊重”硬编码的高度

760px

。但是，在某些浏览器中，单击某个点后，地图会以页面高度的50%左右打印出来。这个我就是解释不了

最大的问题是Internet Explorer 8。打印地图时，地图总是跑到第二页上。我已经想尽一切办法来解决这个问题，但还没有找到任何解决办法

已测试的浏览器：

• MacOSX上的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，但如果可能的话，我真的想避免这样做

---

谢谢你提供的帮助，如果需要的话，我可以在这里发布更多信息

我又拔了几天头发后，就可以正常打印了，而不必过多地解决问题

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

这解决了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的变化，你做他们，去铬

---

我知道你说我知道我可以创建该页面的PDF，但我真的想避免这种情况。对我来说，这种类型的内容（一个精心设计的地图）需要一个pdf。@Jason:也许这只是我（我可能错了！），但作为一个用户，你难道不想直接点击“打印”，让一些东西直接进入你的打印机，而不必通过Adobe Reader吗？我只是在“过时”吗？这是我的偏好。但如果我能保证它能按我想要的方式打印，我会很高兴有一个PDF。更糟糕的是，我们想要打印一张地图，把它剪掉，然后需要复制粘贴到一个新的文档中，然后再打印。我认为，有时候，我们对纯解决方案的渴望导致我们对用户的友好程度降低。我已经犯过很多次了。

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