我一直在努力让我们的一个网页地图以半个体面的方式打印出来,已经持续了几天了。我八天前发布了this question,但是此后我已经解决了那里概述的问题。现在我正在处理其他几个问题,但似乎无法解决。
首先,这里是我正在尝试打印的页面链接: http://maps.nps.gov/maps/rich/footstepsofhistory。
过去几天中,我已经尝试了许多不同的组合来处理浏览器的差异和缺陷,所以我确信我提出的解决方案远非完美。话虽如此,当前部署的解决方案产生了我到目前为止能够制作的最佳结果。
最令人沮丧的是我并没有寻求任何复杂的东西。我只想要我的打印样式表(我已经标记了已解决的项目):
首先,这里是我正在尝试打印的页面链接: 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,但如果可能,我真的想避免这样做。
感谢您能提供任何帮助,如果需要,我可以在此处发布更多信息。