Question

我一直在努力让我们的网络地图以一种不错的方式打印出来，几乎是几天。我八天前发布了this question，但后来解决了那里概述的问题。现在我正在处理其他几个我似乎无法弄清楚的问题。

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

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

最令人沮丧的部分是我不是在寻找任何复杂的东西。我只想要我的打印样式表（我已经标记了要处理的项目）：

~~隐藏所有不必要的元素。~~
调整地图大小以填充整个页面，减去顶部的70px高标题。无论打印尺寸有多大，都应调整大小。
显示一个绝对定位的div，它显示当前所选点在页面上水平居中的属性，并从底部向上15px。

以下是剩下的问题：

我正在将地图div的高度硬编码为760px。我更喜欢使用height:100%;我这样做是因为它似乎是阻止地图在某些浏览器中溢出到第二页的唯一方法。
在点击点之前打印时，地图“尊重”760px硬编码高度。然而，在点击一个点之后，地图在某些浏览器中打印出页面高度的约50％。这个我无法解释。
最大的问题在于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。

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

1 个答案: