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

【问题标题】：css max-height seems to not work for IE Edge browsercss max-height 似乎不适用于 IE Edge 浏览器
【发布时间】：2016-10-23 10:46:53
【问题描述】：

我正在尝试在页面上创建一个浮动 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;
}

【问题讨论】：

我有一个想法，我以前见过这个（但是，我现在的记忆......）。我认为至少在 IE11 中， max-height as % 不起作用 - 尝试设置一个绝对值并检查它是否有效。如果有，请向 Microsoft 投诉……（如果没有，请向 Microsoft 投诉……）
@TonyDuffill IE 和 Edge 不能使用 % 值，你是对的。
是的，我是这么认为的——我使用了绝对值，但我不知道使用 em 是否可行？

标签： html css internet-explorer microsoft-edge

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

而不是： max-height: 70%;

我用过： max-height: 70vh;

虽然这是基于视口的高度而不是父容器的高度。

【讨论】：