我希望做一个流畅的同等高度的柱子，带有一个“覆盖层”＆＃39;点击。
为了让响应性相等的高度工作起作用，我已经制作了“覆盖层”。实际的基本内容（因此它会对列进行调整），并尝试将初始状态放在叠加层中。
这适用于FF和Chrome，但不适用于IE10或11（之前未经过测试）。
在IE上，在TD中执行position: absolute; right: 0; left: 0; top: 0; bottom: 0似乎并不能使覆盖覆盖整个TD，而只是覆盖其中内容的大小。
http://codepen.io/anon/pen/dooJjb
有什么想法吗？
奖励积分： 我的设计师最初想要的是标题向上滑动，以及从底部向上滑动的段落 - 如果没有大量的JS，我们真的认为这是可能的吗？
答案 0 :(得分：0)
我没有在IE中检查过您的示例，但我知道有几种方法可以让您在所有浏览器上使用它。
我总是避免和＆amp;在布局之后因为它们有一些跨浏览器问题，这可能不是你当前的节目限制，但无论如何之前＆amp; 之后的不是真的用于布局恕我直言。
几个月前我做了类似的事情：[[box，box，box] [overlay，overlay，overlay]]：两个持有者的位置绝对，顶部和顶部left = 0，覆盖保持器z-index：1。
[[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);