顯示中的絕對定位錯誤：IE 11中的表格單元

Question

比較Chome（正確）和IE11（非常不正確）中的JSfiddle：

http://jsfiddle.net/Lr90ko3q/

IE似乎看到了內部div中CONTENT的高度，而不是div的實際高度。 換句話說，如果您添加了幾行內容，則左/右箭頭會向下移​​動一點。

這是一個已知的錯誤，並且有可用的解決方法嗎？

謝謝

（JSfiddle代碼的副本）：

    html {
    box-sizing:border-box
}
*, *::before, *::after {
    box-sizing:inherit
}
html, body {
    position:relative;
    width:100%;
    height:100%
}
section {
    width:60%;
    height:60%;
    position:relative;
    background:rgba(0, 0, 0, 0.1)
}
section>.content {
    display:table;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:50px
}
section>.content>div {
    display:table-cell;
    vertical-align:middle;
    position:relative;
    background:rgba(255, 0, 0, 0.2);
    text-align:center
}
#left {
    position:absolute;
    left:5%;
    top:50%;
    margin:0;
    transform:translateY(-50%)
}
#right {
    position:absolute;
    right:5%;
    top:50%;
    margin:0;
    transform:translateY(-50%)
}

Answer 1

我通過僅添加JS來解決此問題，該JS在表格單元格元素上施加了固定的高度。

還使用本機JS，因為該功能非常簡單並且在每個瀏覽器中都受支持。

顯然，將.table / .table-cell替換為您所定位的table / table-cell項。

"use strict";

var ua = navigator.userAgent.toLowerCase();
var ie_version = (ua.indexOf('msie') != -1) ? parseInt(ua.split('msie')[1]) : false;
if (!ie_version && ua.indexOf("trident") !== -1 && ua.indexOf("rv:11") !== -1)
{
    ie_version = 11;
}

if (ie_version == 9 || ie_version == 10 || ie_version == 11)
{
    (function(){
        window.onresize = calculateTableCellHeights;
        calculateTableCellHeights();

        function calculateTableCellHeights() {
            // Fixes IE9/10/11 bug where table-cell doesn't inherit table height
            var tables = document.querySelectorAll(".table");
            for (var t = 0; t < tables.length; ++t)
            {
                var table = tables[t];
                var table_cells = table.querySelectorAll(".table-cell");
                for (var c = 0; c < table_cells.length; ++c)
                {
                    var table_cell = table_cells[c];
                    var display = window.getComputedStyle(table_cell, null).getPropertyValue("display");
                    if (display == "table-cell")
                    {
                        // Set fixed height
                        table_cell.style.height = table.offsetHeight+"px";
                    }
                    else
                    {
                        // If item is no longer a table-cell due to responsive stacking
                        // remove the height.
                        table_cell.style.height = "";
                    }
                }
            }
        }
    })();
}