css max-height似乎不適用於IE瀏覽器邊緣瀏覽器

我正試圖在頁面上創建一個浮動div，它似乎在除IE外的所有瀏覽器上都能正常工作&邊緣。我試圖谷歌它，看看有人有工作，但找不到一個。這裏是搗鼓你在Chrome中嘗試，然後嘗試在邊緣或IE - https://jsfiddle.net/ov02Lkja/css max-height似乎不適用於IE瀏覽器邊緣瀏覽器

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; 
}

來源

2016-06-21 AbdelElrafa

我有一個想法，我以前見過這個（但是，我的記憶現在...）。我認爲至少在IE11中，max-height as％不起作用 - 嘗試設置絕對值並檢查是否有效。如果是這樣，向微軟投訴......（如果沒有，請向微軟投訴......） –

@TonyDuffill IE和Edge不能使用％值，你說得對。 – AbdelElrafa

是的，我認爲是這樣 - 我使用絕對值，但我不知道是否使用em可能工作？ –

看來，IE和邊緣不支持/使用％值。我必須爲這些瀏覽器設置500px的最大高度。非常失望。

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

來源

2016-06-22 16:35:33 AbdelElrafa

css max-height似乎不適用於IE瀏覽器邊緣瀏覽器

回答

相關問題