在 IE8 中打印谷歌地图和使用“page-break-before”时出现问题答案

【问题标题】：Problem printing google maps printing and using 'page-break-before' in IE8在 IE8 中打印谷歌地图和使用“page-break-before”时出现问题
【发布时间】：2010-07-17 16:21:03
【问题描述】：

我遇到了一个烦人的问题，试图让一个带有谷歌地图的 html 页面正确打印，我有一个谷歌地图，上面有一个

全部包裹在一个 div 中，并且 div 设置为'分页前：总是；'在 css 中，以便地图及其标题始终位于新页面上。

问题是，只有在 IE8 中，我总是可以看到打印时在前一页上呈现的大部分地图，而且在前一页上可见的地图部分是在可见范围之外的部分地图。

HTML：

<div id="description">
    <h2>Description</h2>
    <p>Some paragraph of text</p>
    <p>Some paragraph of text</p>
    <p>Some paragraph of text</p>
</div>

<div id="map">
    <h2>Location</h2>
    <div id="mapHolder"></div>
    <script type="text/javascript">
       // ... javascript to create the google map
    </script>
</div>

CSS：

#map { page-break-before:always; }

这是它在 IE8 中呈现的屏幕截图 http://twitpic.com/1vtwrd

它在我尝试过的所有其他浏览器（包括 IE7）中都能正常工作，所以我有点迷茫，有没有人知道任何技巧可以阻止这种情况发生？

【问题讨论】：

您正在使用而不是
关闭 div#description。错字？

是的，这是一个错字，我已经修改了，谢谢

标签： javascript html google-maps internet-explorer-8 printing-web-page

【解决方案1】：

我发现您是否添加了一个具有高度的分页符 div，例如。 Map div前面有10px的空html内容，就可以解决问题了。

在 CSS 中：

page_break_before {高度：10px；分页前：总是； }

然后在Map div前面：

var pageBreakDiv = window.document.createElement('div'); pageBreakDiv.id = 'page_break_before'; printMapDiv.appendChild(pageBreakDiv);

并删除 page-break-before:always;在你的#map div 中。

干杯，

精

【讨论】：

感谢高度提示。