IE7 div border print issue

У меня есть веб-страница, которая делает то же самое в IE7, Firefox и Safari - кроме случаев, когда печать. По умолчанию IE7 выделяет слишком много места для печати.IE7 div border print issue

В приведенном ниже примере высота окна плюс границы должны составлять одну и ту же высоту в 2 колонках. Я установил borders в 10px, чтобы преувеличить проблему.

Я ненавижу хаки CSS, и до сих пор я мог создавать свои страницы без них. Какие-либо предложения?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Untitled Page</title> 

    <style type="text/css"> 
    .container 
    { 
    height:  120px; 
    width:  240px; 
    margin:  0; 
    padding: 0; 
    border:  solid 1px red; 
    } 
    .box1 
    { 
    height:  10px; 
    width:  100px; 
    margin:  0; 
    padding: 0; 
    border:  solid 10px black; 
    float:  left; 
    clear:  left; 
    } 
    .box2 
    { 
    height:  100px; 
    width:  100px; 
    margin:  0; 
    padding: 0; 
    border:  solid 10px black; 
    float:  right; 
    } 
    </style> 

</head> 
<body> 

    <div class="container"> 
    <div class="box1">&nbsp;</div> 
    <div class="box2">&nbsp;</div> 
    <div class="box1">&nbsp;</div> 
    <div class="box1">&nbsp;</div> 
    <div class="box1">&nbsp;</div> 
    </div> 

</body> 
</html>

источник

2009-02-06 Keith Walton

Интересно! вы правы, он не выглядит совсем как версия экрана. – scunliffe

Попробуйте установить свойство высоту строки .box1 на 1%:

.box1 
    { 
    line-height:   1%; 
    }

Кроме того, подумайте об использовании сброса CSS.

EDIT: Кроме того, попробуйте положить box2 div перед коробкой1 divs.

Делать это с линией высоты фиксирует это:

<div class="container"> 
     <div class="box2"> </div> 
     <div class="box1"> </div> 

     <div class="box1"> </div> 
     <div class="box1"> </div> 
     <div class="box1"> </div> 
     </div>

источник

2009-02-06 20:03:40 jacobangel

Работает без высоты линии. Любая идея почему? –

Похоже, box2 очищает первый квадрат1 на печатной странице. Ошибка может быть вызвана плавающей левой/правой/левой последовательностью. –

IE7 div border print issue

ответ

Смежные вопросы