Z-索引排序在IE中无法正确呈现

Question

Currently, I am working on making an accordion table which fades and expands to show a selected row displaying content it contains. For the most part, I have been able to get things working without any issues. I am having a problem with how the content displays in IE.

This first image is the desired effect and it is how it is currently rendering in Firefox and Chrome.

This image is not the desired effect and how it is currently rendering in Chrome (and IE).

I have tried several things involving adjusting z-index but none have worked. My current testing code can be found here: Codepen .

 (function() { 'use strict'; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } function setMargins($table) { var w = $table.innerWidth(); $table.find('.pad').each(function(i, ele) { $(ele).css({ width: (w - ($table.data('tableW') | 0)) / 2 }); }); $table.find('.details .content').each(function(i, ele) { var $ele = $(ele); var innerW = $ele.innerWidth(); $ele.css({ left: (w - innerW) / 2 }); }); } var collapseTable = function() { function collapseTable($table, tableW) { _classCallCheck(this, collapseTable); if (!$table instanceof jQuery) $table = $($table); this.$table = $table; if (tableW | 0) $table.data('tableW', tableW); var scope = this; this.$table.on('click', '.collapser', function() { scope.collapse(); }); this.$table.on('click', '.row', function() { scope.collapse(); var $this = $(this); var $details = $this.prev(); var h = $($details.children('td')[0]).innerHeight(); if (!$details.find('.content')) return; $details.addClass('open'); $this.addClass('open'); $this.css({ height: h, padding: 0 }); }); this.$table.find('.row').each(function(i, ele) { var $ele = $(ele); $ele.data('h', $ele.innerHeight()); $ele.height($ele.innerHeight()); }); $(window).on('resize', function() { setMargins(this.$table); }.bind(this)); setMargins(this.$table); this.$table.show(); } collapseTable.prototype.collapse = function collapse() { this.$table.find('.open').each(function(i, ele) { var $this = $(ele); $this.removeClass('open').addClass('closed'); $this.height($this.data('h')); }); }; return collapseTable; }(); window.collapseTable = collapseTable; }()); var t = new collapseTable($('.collapseTable'), 500); 

 body { background-color: lightblue; } .collapseTable { display: none; width: 90%; margin-left: auto; margin-right: auto; border-radius: 4px; overflow: hidden; background-color: grey; } .collapseTable table { position: relative; width: 100%; border-collapse: collapse; empty-cells: show; } .collapseTable .details { position: absolute; width: 100%; } .collapseTable .row { position: relative; background-color: #fff; opacity: .99; transition: all .5s ease; } .collapseTable .row.open { opacity: 0; color: transparent; visibility: hidden; } .collapseTable .details .content { position: relative; left: 30px; margin: 1em 0; width: 300px; background: blue; opacity: .99; padding: 4em; } .collapseTable .details { align-content: center; vertical-align: middle; opacity: 0; transition: all .5s ease; } .collapseTable .details.open { opacity: 1; background-color: grey; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="collapseTable"> <table> <tr class="details"> <td> <div class="content collapser"> <pre> f asdfs ;lkfdsja fas f sa sfda sdaf dsaf sdaf sd fa ds fa d </pre> </div> </td> </tr> <tr class="row closed"> <td class="pad"></td> <td> asf </td> <td> asf2 </td> <td> asf2 </td> <td> asf2 </td> <td class="pad"></td> </tr> <tr class="details"> <td> <div class="content"> <pre> sf sd ksd sda fsd fds sd af d as dfa sdf sa fds </pre> </div> </td> </tr> <tr class="row closed"> <td class="pad"></td> <td> hgf </td> <td> hgf </td> <td> asf2 </td> <td> asf2 </td> <td class="pad"></td> </tr> <tr class="details"> <td> <div class="content"> <pre> sf sd ksd sda fsd fds sd af d as dfa sdf sa fds </pre> </div> </td> </tr> <tr class="row closed"> <td class="pad"></td> <td> hgf </td> <td> hgf </td> <td> asf2 </td> <td> asf2 </td> <td class="pad"></td> </tr> <tr class="details"> <td> <div class="content"> <pre> sf sd ksd sda fsd fds sd af d as dfa sdf sa fds </pre> </div> </td> </tr> <tr class="row closed"> <td class="pad"></td> <td> hgf </td> <td> hgf </td> <td> asf2 </td> <td> asf2 </td> <td class="pad"></td> </tr> </table> </div> 

Edit: I successfully corrected the issue in Chrome but it is still rendering incorrectly in IE.

Answer 1

如果在类“ .collapseTable .open.details”中添加“ background-color：grey”，那么我希望它在整个浏览器中都能正常工作。