显示中的绝对定位错误: IE 11中的表格单元

Question

在Chome (正确)和IE11 (非常不正确)中比较和对比这个JSfiddle：

http://jsfiddle.net/Lr90ko3q/

IE似乎看到的是内部div中内容的高度，而不是div的实际高度。换句话说，如果您再添加几行内容，左/右箭头会向下移动一点。

这是一个已知的bug吗?是否有可用的解决方法？

谢谢

( 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，因为它的功能相当简单，并且在每个浏览器上都受支持。

显然，将.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 = "";
                    }
                }
            }
        }
    })();
}