为什么Internet Explorer会在溢出的div中创建内容:隐藏消失?

时间:2012-12-03 19:59:08

标签: css internet-explorer

最内层div内的内容显示在除IE之外的每个浏览器上。为什么?我注意到,如果我从overflow:hidden删除.absolute_container,那么.item中的内容就会显示出来,但我需要`overflow:hidden``来保留显示原因。

HTML:

<tr>
    <td>
        <div class="relative">
            <div class="absolute">
                <div class="absolute_container">
                    <div class="relative">
                        <div class="item_wrap">
                            <div class="item">
                                // doesn't show up in IE
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </td>
</tr>

CSS:

.relative {
    position: relative;
    width: 100%;
    height: 100%;
}

.absolute {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.absolute_container {
    position: absolute;
    top: 25px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    overflow: hidden;
}

.item_wrap {
    overflow: hidden;
    height: 16px;
    font-size: 12px;
    clear: right;
    white-space: nowrap;
    margin-bottom: 1px;
}

.item {
    position: relative;
    z-index: 999999;
    background-color: transparent;
    float: left;
}

1 个答案:

答案 0 :(得分:1)

您需要清除.item上的浮动以将其放回到该布局中,否则父元素不知道元素有多大,这就是使用overflow:hidden时它消失的原因。 / p>