IE7/IE8 page-break-after：常に動作しません。

Firefoxでは、page-break-after: always;ディレクティブが正常に動作しています。しかし、この同じコードはIEによって一見無視されます。テストするには、コードをコピーして新しいHTMLドキュメントに貼り付けてから、印刷プレビューを保存してからテストしてください。印刷プレビュー中に、私はFirefoxでそうであるように、実際にそのことをするためにpage-break-afterディレクティブを必要とします。以下IE7/IE8 page-break-after：常に動作しません。

全体コード：ページブレークが配置要素に適用されているので、質問して質問に答えるための

<html> 
<head> 
<style type="text/css"> 
body 
{ 
    margin: 0; 
    font-style: verdana; 
    font-size: 12px; 
    clear: both; 
} 
div.header 
{ 
    display: block; 
} 
div.header img 
{ 
    height: 160px; 
    display: block; 
    margin: 0 auto; 
} 
div.left 
{ 
    float: left; 
    width: 40%; 
    min-height: 550px 
} 
div.right 
{ 
    float: left; 
    width: 40%; 
    display: block; 
    margin-left: 40px; 
    min-height: 550px; 
    page-break-after: always; 
} 
div.last 
{ 
    min-height: 550px; 
    width: 100%; 
    display: block; 
    clear: both; 
    margin-bottom: 20px; 
    page-break-after: always; 
} 
div.images 
{ 
} 
div.images img 
{ 
    max-height: 240px; 
    margin: 10px; 
    display: block; 
    margin: 0 auto; 
} 
img.smaller 
{ 
    padding-bottom: 10px; 
} 
h3 
{ 
    font-weight: bold; 
    display: inline; 
} 
h3.blurb 
{ 
    display: block; 
    margin-bottom: 5px; 
} 
hr.line 
{ 

} 
span.blurb 
{ 
    display: block; 
    border: 1px solid #000; 
    padding: 2px; 
    word-wrap: break-word; 
} 
span.memories 
{ 

} 
span.activities 
{ 

} 
span.university 
{ 

} 
span.children 
{ 

} 
span.hobbies 
{ 

} 
span.volunteer 
{ 

} 
</style> 
<!--[if IE]> 
<style type="text/css"> 
div.left 
{ 
    height: expression(document.body.clientHeight > 550 ? "550px" : "auto"); 
} 
div.right 
{ 
    height: expression(document.body.clientHeight > 550 ? "550px" : "auto"); 
} 
div.images img 
{ 
    height: expression(document.body.clientHeight > 240 ? "240px" : "auto"); 
} 
img.smaller 
{ 
    display: block; 
    padding-bottom: 10px; 
} 

img 
{ 
    text-align: center; 
} 
</style> 
<![endif]--> 
</head> 
<body> 
<div class="header"><img src="https://www.google.com/images/srpr/logo3w.png" /></div> 
<div class="left"> 
    <h3>Name:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli 
    <hr class="line" /> 


    <h3>Current Name:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli 
    <hr class="line" /> 

    <h3>Address:</h3> 2345 Vivamus et Tellus Street 
    <hr class="line" /> 

    <h3>Home Phone:</h3> 9096761212 
    <hr class="line" /> 

    <h3>Cell Phone:</h3> 9096761212 
    <hr class="line" /> 


    <h3>Email:</h3> [email protected] 
    <hr class="line" /> 

    <h3>Employer/Retired:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli 
    <hr class="line" /> 

    <h3>Job Title:</h3> Lorem ipsum dolor sit ame 
    <hr class="line" /> 

    <h3>Are you planning to attend reunion?</h3> Yes 
    <hr class="line" /> 


    <h3 class="blurb">Memories:</h3> 
    <span class="blurb memories">None provided</span> 

    <h3 class="blurb">Student Activities/Clubs:</h3> 
    <span class="blurb activities">None provided</span> 
</div> 
<div class="right" style="page-break-after: always;"> 
    <h3>Major:</h3> Lorem ipsum dolor sit ame 
    <hr class="line" /> 


    <h3>Spouse/partner name:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli 
    <hr class="line" /> 

    <h3>Spouse/partner employer:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli 
    <hr class="line" /> 

    <h3>Spouse/partner job title:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli 
    <hr class="line" /> 

    <h3 class="blurb">Spouse/Partner University and Class Year:</h3> 

    <span class="blurb university">Lorem ipsum dolor sit amet, consectetuer adipiscing eli</span> 

    <h3 class="blurb">Children (list names/ages):</h3> 
    <span class="blurb children">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, Sed quis nunc, Aliquam</span> 

    <h3 class="blurb">Interests/Hobbies:</h3> 
    <span class="blurb hobbies">Lorem ipsum dolor</span> 

    <h3 class="blurb">Volunteer Work (include services):</h3> 

    <span class="blurb volunteer">None provided</span> 
</div> 
<div class="last" style="page-break-after: always;"> 
    <h3 class="blurb">Life since</h3> 
    <span class="blurb life">None provided</span> 
</div> 


<div class="header"><img src="https://www.google.com/images/srpr/logo3w.png" /></div> 
<div class="left"> 
    <h3>Name:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli 
    <hr class="line" /> 


    <h3>Current Name:</h3> Lorem ipsum 
    <hr class="line" /> 

    <h3>Address:</h3> None provided 
    <hr class="line" /> 

    <h3>Home Phone:</h3> None provided 
    <hr class="line" /> 

    <h3>Cell Phone:</h3> None provided 
    <hr class="line" /> 


    <h3>Email:</h3> None provided 
    <hr class="line" /> 

    <h3>Employer/Retired:</h3> None provided 
    <hr class="line" /> 

    <h3>Job Title:</h3> None provided 
    <hr class="line" /> 

    <h3>Are you planning to attend reunion?</h3> Yes 
    <hr class="line" /> 


    <h3 class="blurb">Memories:</h3> 
    <span class="blurb memories">None provided</span> 

    <h3 class="blurb">Student Activities/Clubs:</h3> 
    <span class="blurb activities">None provided</span> 
</div> 
<div class="right" style="page-break-after: always;"> 
    <h3>Major:</h3> Lorem ipsum dolor sit ame 
    <hr class="line" /> 


    <h3>Spouse/partner name:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli 
    <hr class="line" /> 

    <h3>Spouse/partner employer:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli 
    <hr class="line" /> 

    <h3>Spouse/partner job title:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli 
    <hr class="line" /> 

    <h3 class="blurb">Spouse/Partner University and Class Year:</h3> 

    <span class="blurb university">Lorem ipsum dolor sit amet, consectetuer adipiscing eli</span> 

    <h3 class="blurb">Children (list names/ages):</h3> 
    <span class="blurb children">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, Sed quis nunc, Aliquam</span> 

    <h3 class="blurb">Interests/Hobbies:</h3> 
    <span class="blurb hobbies">Lorem ipsum dolor</span> 

    <h3 class="blurb">Volunteer Work (include services):</h3> 

    <span class="blurb volunteer">None provided</span> 
</div> 
<div class="last" style="page-break-after: always;"> 
    <h3 class="blurb">Life since</h3> 
    <span class="blurb life">None provided</span> 
</div> 
</body> 
</html>

出典

2012-03-07 Anonymous

謝罪、しかし、それは可能でしょうか？

MSDNを明確に

改ページが内側に位置するオブジェクトを許可されていないと述べています。

http://msdn.microsoft.com/en-us/library/ms530842(v=vs.85).aspx

出典

2012-03-07 03:58:41 bPratik

私のコードからわかるように、私はpositionディレクティブを使用していません。これを指摘してくれてありがとう –

はい、私はそれを見ましたが、私は考えていました、恐ろしく間違っている可能性があり、 'Float'タグは潜在的にポジショニングタグとして数えることができます。 – bPratik

まあ、ありがとう。記事ではCSSの予約語が指定されておらず、位置も予約語なので、私はそれらが位置指示を特に指していることはほとんど確信しています。 –

（後と前）改ページ自身でのInternet Explorer のために十分ではありません。あなたがこれを試してみたら、結果を見ることができます。私は同じ問題を抱えていますが、私はこの方法で解決しました。

<div style="page-break-after: always;"></div> <div>  </div>

出典

2015-10-27 07:59:19

インライン要素に注意してください。 IEでpage-break-after: always;を<br>と<span>で処理することができませんでしたが、<div>で正常に機能しました。

<br style="page-break-after: always;">   <!-- does not work --> 
<span style="page-break-after: always;"></span> <!-- does not work --> 
<div style="page-break-after: always;"></div> <!-- this works! -->

出典

2015-11-02 16:02:04

IE7/IE8 page-break-after：常に動作しません。

答えて

関連する問題