在IE中覆盖100%覆盖TD

Question

我正在寻找一个流动的reponsive相等高度列,点击"覆盖".

为了使响应相等的高度工作,我已经将'overlay'设为实际的基本内容(因此它会对列进行调整),并且我尝试将初始状态放在叠加层中.

这适用于FF和Chrome,但不适用于IE10或11(之前未测试过).

在IE上,position: absolute; right: 0; left: 0; top: 0; bottom: 0在TD内部进行似乎并不会使覆盖覆盖整个TD,而只是覆盖其中的内容大小.

http://codepen.io/anon/pen/dooJjb

有任何想法吗？

奖励点:我的设计师最初想要的是标题向上滑动,以及从底部向上滑动的段落 - 如果没有大量的JS,真的不认为这是可能的吗？

Answer 1

我没有在 IE 中检查过你的示例，但我知道有几种方法可以让它在所有浏览器上运行。

我总是避免使用布局之前和之后，因为它们有一些跨浏览器问题，这可能不是您当前的显示阻止者，但无论哪种方式之前和之后都不是真正适合布局恕我直言。

几个月前我做了类似的事情：

1. [ [box,box,box] [overlay,overlay,overlay] ] ：两个支架具有绝对位置，顶部和左侧 = 0，覆盖支架 z-index:1。

2. [ [box,overlay] [box,overlay] [box,overlay] ] ：框是相对的，覆盖层是绝对定位的。所有覆盖尺寸均已定义并指定 z-index 为 1。

关键是要保持干净，在这种情况下，您实际上不需要超过 3 个级别，您只需要定位并正确设置图层即可。

使用 jQuery 对段落进行动画处理会很干净，但我更喜欢使用另一个动画库，例如 GSAP。但如果你必须原生地并且如果你能用 IE8 跳过动画那么你基本上会设置 CSS3 过渡并使用类似.classList的东西来切换类http://jsfiddle.net/davidThomas/Tpz86/

function classToggle() {
    this.classList.toggle('class1');
    this.classList.toggle('class2');
}
document.querySelector('#div').addEventListener('click', classToggle);