IE11

Question

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

Answer 1

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

.cell span {
    float: right;
}

Answer 2

您可以在IE11中进行 fix 修复的一件事是将cell的内容包装到 block容器，然后将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>