IE11上表格单元格内绝对位置的奇怪行为答案

【问题标题】：Strange behaviour of position absolute inside table-cell on IE11IE11上表格单元格内绝对位置的奇怪行为
【发布时间】：2025-11-21 11:15:01
【问题描述】：

我必须修复这个布局，它是 flexbox、表格布局和绝对定位的混乱组合。

虽然在 Chrome、FF 和 Safari 上运行正常，但在 IE11 上的输出画面很奇怪。

在我的代码中，我希望 span 位于每个方块的右下角，但在 IE11 上，它却出现在右上角。

谁能帮我解决这个问题？这里的约束是flexbox.container和表系统必须维护。我只想修复 span 元素。提前致谢！

.container {
  display: flex;
  width: 400px;
}

.inner {
  width: 50%;
}

.table {
  display: table;
  width: 100%;
  border: 1px solid;
}
.table:before {
  content: '';
  display: table-cell;
  width: 0;
  padding-bottom: 100%;
}

.cell {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  padding: 20px;
}
.cell span {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

<div class="container">
    <div class="inner">
        <div class="table">
            <div class="cell">
                Yeah?
                <span>Yo!</span>
            </div>
        </div>
    </div>

    <div class="inner">
        <div class="table">
            <div class="cell">
                Yeah?
                <span>Yo!</span>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： html css internet-explorer html-table css-position

【解决方案1】：

删除您的 .cell 跨度块并使用下面的代码而不是那个。我已经检查了它在每个浏览器中的工作情况。

.cell span {
    float: right;
}

【讨论】：

【解决方案2】：

您可以在 IE11 中修复它的一件事是将您的 cell 内容包装到 块容器 中，然后将 position: relative 添加到其中。现在您可以使用right: 0px 调整位置 - 请参阅下面的演示：

.container {
  display: flex;
  width: 400px;
}

.inner {
  width: 50%;
}

.table {
  display: table;
  width: 100%;
  border: 1px solid;
}
.table:before {
  content: '';
  display: table-cell;
  width: 0;
  padding-bottom: 100%;
}

.cell {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  padding: 20px;
}
.cell span {
  position: absolute;
  /*bottom: 20px;
  right: 20px;*/
  right: 0px; /* ADDED */
}

.cell div { /* ADDED */
  position: relative;
}

<div class="container">
    <div class="inner">
        <div class="table">
            <div class="cell">
                <div>Yeah?
                <span>Yo!</span></div>
            </div>
        </div>
    </div>

    <div class="inner">
        <div class="table">
            <div class="cell">
                <div>Yeah?
                <span>Yo!</span></div>
            </div>
        </div>
    </div>
</div>

【讨论】：

似乎以前的编码员希望span 绝对定位在整个.cell 父级之后。因此，您所做的事情消除了将span 置于.cell 之后的能力（这里最常见的问题之一）。而且，事实上，.cell 元素内部比这个更复杂。我只是复制了这种情况的最简单版本，因此像这样更改为position 属性是非常冒险的。