IE7 / IE8 разрыв страницы: всегда не работает - PullRequest
Новая
       64

IE7 / IE8 разрыв страницы: всегда не работает

2 голосов
/ 07 марта 2012

В Firefox директива page-break-after: always; работает нормально.Однако этот же код, по-видимому, игнорируется IE.Для проверки скопируйте и вставьте код в новый HTML-документ перед сохранением, а затем протестируйте предварительный просмотр.Во время предварительного просмотра печати я хочу, чтобы директива разрыва страницы действительно делала то, что говорит, как в Firefox.

Весь код ниже: 

<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> lipsum@marius.com
    <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>

Ответы [ 3 ]

2 голосов
/ 07 марта 2012

Извиняюсь за ответ на вопрос вопросом, но может ли это быть из-за того, что разрывы страниц применяются к позиционированным элементам?

MSDN четко заявляет, что

Разрывы страницне допускается внутри расположенных объектов.

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

1 голос
/ 27 октября 2015

разрыва страницы (после и до) недостаточно для интернет-обозревателя от собственного . Если вы попробуете это, вы увидите результат. У меня та же проблема, но я решил таким образом. 

<div style="page-break-after: always;"></div>
<div>&nbsp;
</div>
0 голосов
/ 02 ноября 2015

Остерегайтесь встроенных элементов.Я не смог заставить page-break-after: always; работать на <br> и <span> в IE, но он прекрасно работал на <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! -->
...