IE7 div border impression issue

J'ai une page Web qui rend la même chose dans IE7, Firefox et Safari - sauf lors de l'impression. IE7 semble allouer trop d'espace pour les bordures lors de l'impression.IE7 div border impression issue

Dans l'exemple ci-dessous, les hauteurs de boîte plus les bordures doivent être égales à la même hauteur dans les deux colonnes. J'ai mis le borders à 10px pour exagérer le problème. Je déteste les hacks CSS, et jusqu'à présent j'ai pu créer mes pages sans eux. Aucune suggestion?

<!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>

Source

2009-02-06 Keith Walton

Intéressant! vous avez raison, cela ne ressemble pas du tout à la version d'écran. – scunliffe

Essayez définissant la propriété-hauteur de la ligne de .box1 à 1%:

.box1 
    { 
    line-height:   1%; 
    }

Aussi, pensez à utiliser une réinitialisation css.

EDIT: Aussi, essayez de placer le div box2 avant les divs box1.

Faire cela avec la hauteur de ligne fixe il:

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

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

Source

2009-02-06 20:03:40 jacobangel

Fonctionne sans la hauteur de ligne. Une idée pourquoi? –

Il semble que box2 efface la première case1 de la page imprimée. Le bug peut être déclenché par une séquence flottante gauche/droite/gauche que vous avez. –

IE7 div border impression issue

Répondre

Questions connexes