文本不适合IE

Question

我在Internet Explorer上遇到以下问题。

如上图所示，文本不在表格单元格内。这在其他浏览器中有效，但不适用于IE。文本应在单元格内，如下图所示：（Chrome）

我尝试使用table-layout:fixed失败。这是表格元素的SASS代码。

/**
 * Tables
 */

// Dependencies
@import 'config/media';
@import 'config/dimensions';
@import 'config/fonts';
@import 'config/direction';
@import 'config/colors';

// Declarations
@mixin table($alignment: $text-direction-end) {
  font-size: $font-size-small;
  margin-bottom: $spacing-base;
  max-width: 100%;
  text-align: $alignment;

  @media screen and (min-width: $screen-tablet) {
    font-size: inherit;
  }

  thead {
    border-bottom: 1px solid $color-grey-dark;
    color: $color-blue;

    tr {
      background-color: none;
    }
  }

  tbody {
    tr {
      &:nth-child(odd) {
        background-color: $color-grey-lightest
      }
    }
  }

  th {
    vertical-align: top;
  }

  th, td {
    padding: ($spacing-base * .5) 4%
  }

  td > *, th > * {
    display: inline-block; // Tried without success
  }
}

.table table {
  @include table
}

.table-align-start table {
  @include table($text-direction-start)
}

.table-align-end table {
  @include table($text-direction-end)
}

删除padding可以解决重叠问题，但会影响设计。

以下是指向表元素显示问题的网站的链接：

https://cityofnewyork.github.io/ACCESS-NYC-PATTERNS-DEVELOPMENT/toggle

有什么可能的解决方案的想法吗？