css max-height 似乎不适用于 IE Edge 浏览器

Question

我正在尝试在页面上创建一个浮动 div，它似乎在除 IE 和 Edge 之外的所有浏览器上都能完美运行。 我试图用谷歌搜索它，看看是否有人可以解决，但找不到。 这是您在 Chrome 中尝试然后在 Edge 或 IE 中尝试的小提琴 - https://jsfiddle.net/ov02Lkja/

HTML -

<div id="tracking-products-container" style="display: table;">
  <div class="tracking-products-inner">
    <div class="tracking-products-wrapper">
      <table>
        <thead>
          <tr>
            <th>
              <input class="check-all-tracking-products" type="checkbox">
            </th>
            <th>Item</th>
            <th>&nbsp;</th>
            <th>Quantity Shipped</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <input name="tracking_products[]" type="checkbox" value="54">
            </td>
            <td></td>
            <td class="cell-name">Something</td>
            <td>
              <input name="tracking_quantity[54]" type="number" value="384">
            </td>
          </tr>
          <tr>
        </tbody>
      </table>
    </div>
    <div class="tracking-products-bottom"><a class="button button-primary" id="tracking-products-save">Select Products</a></div>
  </div>
</div>

CSS -

.tracking-content .tracking-products {
  margin-top: 10px;
  background: #e1e1e1;
  width: 100%;
  table-layout: fixed;
  text-align: left;
}

.tracking-content .tracking-products th {
  background: #fff;
}

.tracking-content .tracking-products td {
  background: #fff;
}

.tracking-content .tracking-products td,
.tracking-content .tracking-products th {
  padding: 5px;
}

#tracking-select-products {
  margin-right: 3px;
}

#tracking-products-container {
  background: rgba(0, 0, 0, 0.85);
  position: fixed;
  display: table;
  top: 0;
  right: 0;
  z-index: 1000000;
  width: 100%;
  height: 100%;
}

.tracking-products-inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  max-width: 500px;
}

.tracking-products-wrapper {
  max-width: 500px;
  margin: 0 auto;
  overflow-y: scroll;
  max-height: 70%;
  background: #fff;
  padding: 15px;
}

.tracking-products-wrapper table {
  width: 100%;
}

.tracking-products-wrapper table thead {
  background: #eee;
}

.tracking-products-wrapper table thead th {
  padding: 5px;
}

.tracking-products-wrapper table td.cell-name {
  text-align: left;
}

#woocommerce-shipment-tracking .tracking-products-wrapper input[type="checkbox"] {
  width: auto;
}

.tracking-products-bottom {
  background: #fff;
  padding: 15px;
  margin-top: 10px;
  max-width: 500px;
  margin: 0 auto;
  text-align: right;
}

Answer 1

似乎 IE 和 Edge 不支持/使用 % 值。 我必须为这些浏览器设置 500px 的最大高度。 非常令人失望。

@supports (-ms-accelerator:true) {
    .tracking-products-wrapper {
      max-height: 500px !important;
    }
}

Answer 2

我也遇到了这个问题，并且使用视口高度单位而不是百分比很幸运。

而不是： max-height: 70%;

我用过： max-height: 70vh;

尽管这是基于视口的高度而不是父容器的高度。