Question

比较和对比这个JSfiddle in Chome（正确）和IE11（非常肯定不正确）：

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

显然将.table / .table-cell替换为您所谓的表格/表格单元格项目。

platformVersion

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

1 个答案: