Question

我有一个在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>

Answer 1

尝试将.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>

IE7 div边框打印问题

1 个答案: