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

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.