麻烦使用display：table和overflow：隐藏在IE和Firefox中（在Webkit / blink中工作）

Question

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/

Answer 1

你可以在没有这样的包装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;
}