css - 高度在 IE6 中不起作用

标签 css internet-explorer

我尝试在 body 中心创建一个红色背景的十字,截图:

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

不知道怎么回事?有什么办法可以解决吗?

最佳答案

所以 overflow: hidden 解决了你的问题,所以它的评论者的任务是粘贴评论作为答案。或者提问者应该这样做,这样其他访问者就会知道这个问题有正确答案。

关于css - 高度在 IE6 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24859349/

相关文章:

javascript - 试图用 jQuery 隐藏()一个元素

html - Bootstrap 4 li 标签不作为 block 元素对齐

vb.net - 使用 VB.Net 访问 html <embed> 标记源 html 中的元素

html - 悬停背景图片在 IE11 中不起作用

css - 当我在 CSS 中旋转时,如何将我的文本放在一行中

javascript - Bootstrap 轮播,修改为显示多个元素。 Firefox 和 IE 无法正常工作

jquery - 使用 CORS header 时,$.get 在 IE 中不起作用

java - 驱动程序可执行文件必须由 webdriver.ie.driver 系统属性设置

IE 中的 CSS 中断

javascript - Materialise CSS 框架汉堡菜单不起作用