使用显示时出现问题:表和溢出:隐藏在IE和Firefox中(在Webkit/blink中工作）

Trouble using display: table and overflow: hidden in IE and Firefox (works in Webkit/blink)

本文关键字：Firefox IE Webkit 工作 blink 溢出 显示 问题 隐藏      更新时间：2023-09-26

JSFiddle ： http://jsfiddle.net/h7xvr2t9/2/

我正在尝试实现一种实现一些效果的方法：

  • 将 DIV 滑入应隐藏在可见容器下方的位置
  • 将文本/图像居中放在链接上以触发幻灯片

.HTML

<div class="outer">
    <div class="inner">
            <a id="clickerthing" href="#" class="click">click</a>
            <div class="hidden">
                you can't see me until after the click... 
            </div>
    </div>
</div>

.CSS

div {
    border: thin dashed black;
}
.outer {
    float: left;
    width: 235px;
    background-color: red;
}
.inner {
    text-align: center;
    position: relative;
    height: 200px;
    overflow: hidden;
    display: table;
    width: 100%;
}
.click {
    display: table-cell;
    height: 100%;
    width: 100%;
    vertical-align: middle;
    background-color: yellow;
}
.hidden {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: -200px;
    left: 0px;
    text-align: left;
    background-color: #FFF;
    transition: all 0.3s ease-in-out 0s;
}
.clicked {
    bottom: 0;
}

当前代码使用 display: table 和 display: table-cell 为链接和 DIV 正确定位内容。问题在于Firefox和IE处理这个问题的方式与Chrome/Safari不同。在前者浏览器中，隐藏的 DIV 始终可见，而在后者中，它是隐藏的并尊重overflow: hidden CSS。

我的主要问题是：哪个浏览器行为正确？我找不到明确的答案，大多数答案只建议特定于案例的解决方法。

记住...

我注意到在容器周围添加一个包装div 可以随心所欲地隐藏东西，但我仍然不确定为什么...... ： http://jsfiddle.net/h7xvr2t9/3/

你可以像这样在没有包装div 的情况下做到这一点。

http://jsfiddle.net/h7xvr2t9/8/

div {
    border: thin dashed black;
}
.outer {
    float: left;
    width: 235px;
    background-color: red;
    overflow:hidden
}
.inner {
    text-align: center;
    position: relative;
    height: 200px;
    display: table;
    width: 100%;
}
.click {
    display: table-cell;
    height: 100%;
    width: 100%;
    vertical-align: middle;
    background-color: yellow;
}
.hidden {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: -200px;
    left: 0px;
    text-align: left;
    background-color: #FFF;
    transition: all 0.3s ease-in-out 0s;
    }
.clicked {
    bottom: 0;
}
相关文章：