3

Google マップを含む HTML ページを正しく印刷しようとすると、厄介な問題が発生します。Google マップの上に <h2> がすべて div でラップされており、div が「改ページ」に設定されています。 -before:常に;' 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を含め、私が試した他のすべてのブラウザで正常に動作するので、少し迷っています.これが起こらないようにするためのトリックのアイデアはありますか?

4

1 に答える 1

2

たとえば、高さのある改ページdivを追加するかどうかがわかりました。Map divの前に空のhtmlコンテンツがある10pxの場合、問題を解決できます。

CSSで：

page_break_before { 高さ: 10px; 改ページ前:常に; }

次に、Map div の前に:

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

page-break-before:always; を削除します。あなたの #map div で。

乾杯、

ジン

于 2010-07-16T11:36:03.583 に答える