IE7 Div Печать границы вопроса - PullRequest
Новая
       15

IE7 Div Печать границы вопроса

1 голос
/ 06 февраля 2009

У меня есть веб-страница, которая отображается одинаково в IE7, Firefox и Safari - за исключением печати. IE7 выделяет слишком много места для границ при печати. ​​

В приведенном ниже примере высота блоков плюс границы должны составлять одинаковую высоту в 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>

1 Ответ

1 голос
/ 06 февраля 2009

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

    .box1 
    {
    line-height:         1%;   
    }

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

РЕДАКТИРОВАТЬ: Кроме того, попробуйте поместить div box2 перед divs box1.

Делая это с высотой строки, исправляет это: 

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

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