代码之家 › 专栏 › 技术社区 › Keith Walton

IE7 div边框打印问题

printing firefox internet-explorer css html

1

Keith Walton · 技术社区 · 17 年前

我有一个网页,在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 回复 | 直到 9 年前

1

jacobangel 17 年前

尝试将.box1的行高属性设置为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>