javascript - z-index 排序在 IE 中无法正确呈现

Question

目前，我正在制作一个 Accordion 表，它会淡出和展开以显示选定的行，显示它包含的内容。在大多数情况下，我已经能够毫无问题地进行工作。我对内容在 IE 中的显示方式有疑问。

第一张图片是所需的效果，它是当前在 Firefox 和 Chrome 中呈现的方式。

此图像不是预期的效果以及它当前在 Chrome(和 IE)中的呈现方式。

我尝试了几种涉及调整 z-index 的方法，但都没有奏效。我当前的测试代码可以在这里找到: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>

编辑: 我在 Chrome 中成功纠正了这个问题，但它在 IE 中仍然呈现不正确。

Answer 1

如果您在“.collapseTable .open.details”类中添加“background-color:grey”，那么我希望它可以跨浏览器工作。