Question

我试图用红色背景在身体中心创建一个十字架，截图：

enter image description here

这是html片段：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html,body{
            padding:0;
            margin:0;
            width:100%;
            height:100%;
        }

        .mask{
            width:100%;
            height:100%;
        }
        .mask .row{
            position:absolute;
            left:50%;
            width:40px;
            margin-left:-20px;

            top:50%;
        }
        .mask .col{
            position:absolute;
            top:50%;
            height:40px;
            margin-top:-20px;

            left:50%;
        }
    </style>
</head>
<body>
    <div class="mask">
        <div class="row" style="height: 2px; margin-top: -1px; background: red;"></div>
        <div class="col" style="width: 2px; margin-left: -1px; background: red;"></div>
    </div>
</body>
</html>

它在IE7 +，FF，chrome中按预期工作。演示：http://jsfiddle.net/3f2RE/

然而，div在IE6中有一个意想不到的高度，截图：

enter image description here

我不知道发生了什么？有什么办法解决吗？

Answer 1

所以overflow: hidden解决了您的问题，因此其评论者的任务是将评论粘贴为答案。或者askers应该这样做，所以其他访问者会知道这个问题有正确的答案。

高度在IE6中不起作用

1 个答案: