Javascript 使用显示时出现问题：表格和溢出：隐藏在IE和Firefox中（适用于Webkit/blink）

JSFiddle：

---

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

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

HTML

---

当前代码使用

display:table

和

display:table cell

为链接和div正确定位内容。问题是Firefox和IE处理这个问题的方式与Chrome/Safari不同。在前一种浏览器中，隐藏的DIV总是可见的，而在后一种浏览器中，隐藏的DIV是隐藏的，并且尊重

overflow:hidden

CSS

我的主要问题是：哪个浏览器运行正常？我找不到一个明确的答案，大多数答案只是建议了一些针对具体情况的解决办法

牢记

---

我注意到在容器周围添加一个包装div隐藏了我想要的东西，但我仍然不确定为什么…：

不需要像这样包装div就可以完成

---

你可以不用像这样包装div

---

好的，隐藏div的状态应该是什么，display-wise？如果没有特定的

显示

属性，则直接在

表

中是一个

块

，根据规范，这是一个错误。（与编写

…

）那么哪个浏览器是正确的？好的，显示错误标记的正确方法是什么。好的，隐藏div的状态应该是什么，显示方面？如果没有特定的

显示

属性，则直接在

表

中是一个

块

，根据规范，这是一个错误。（与编写

…

）那么哪个浏览器是正确的？好的，显示错误标记的正确方法是什么。好的，隐藏div的状态应该是什么，显示方面？如果没有特定的

显示

属性，则直接在

表

中是一个

块

，根据规范，这是一个错误。（与编写

…

）那么哪个浏览器是正确的？那么，显示错误标记的正确方式是什么呢。

<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>

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;
}

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;
}