javascript - 在 IE8 中打印谷歌地图打印和使用 'page-break-before' 时出现问题

Question

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

，所有包裹在一个 div 中，div 设置为 '分页前:总是；'在 css 中，以便 map 及其标题始终位于新页面上。

问题是，只有在 IE8 中，打印时我总能看到上一页呈现的大部分 map ，而且上一页可见的 map 部分是在可见边界之外的部分 map 。

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)中都运行良好，所以我有点迷茫，有没有人有任何想法可以阻止这种情况发生？

Answer 1

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

在 CSS 中:

分页前{ 高度:10px；分页前:总是；

然后在 map div的前面:

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

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

干杯，

静