IE7的div邊框打印問題

我有一個網頁，在IE7，Firefox和Safari中呈現相同 - 除了打印時。打印時，IE7似乎爲邊框分配了太多空間。IE7的div邊框打印問題

在下面的例子中，箱體高度加邊框應該在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 2009-02-06 20:02:17

嘗試.box1的line-height屬性設置爲1％：

.box1 
    { 
    line-height:   1%; 
    }

而且，考慮使用一個CSS復位。

編輯：此外，請嘗試將box2 div放在box1 div之前。

與行高這樣做修復它：

<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

無線高度工作。任何想法爲什麼？ – 2009-02-06 20:11:27

IE7的div邊框打印問題

回答

相關問題