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

Posted 2023-03-06

【中文标题】IE11上表格单元格内绝对位置的奇怪行为

【英文标题】：Strange behaviour of position absolute inside table-cell on IE11

【发布时间】：2019-02-22 01:47:16

【问题描述】：

我必须修复这个布局，它是 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>

【参考方案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 属性是非常冒险的。