Странное поведение абсолютного положения внутри ячейки таблицы в 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

Одна вещь, которую вы можете сделать, чтобы исправить это в 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>

Answer 2

удалите ваш блок .cell span и используйте код ниже.Я проверил его работу в каждом браузере.

.cell span {
    float: right;
}