祖先显示时 IE11 表格布局中断：flex [重复]

Question

我有一个在 Chrome 中正确布局的简单表格。但是在 IE11 中，当祖先元素具有 display: flex 时，布局会被破坏。

页面底部的输入框应距表格标题底部10px。为此，我在标题文本本身上设置了margin-bottom，以为输入框（过滤器）腾出空间，然后我将它们绝对定位到th 元素的底部，这些元素有position:relative 来锚定它们.

这里是链接： https://codepen.io/nfknight/pen/KXyKdw

任何帮助表示赞赏！或者我很好奇是否还有其他关于如何使用固定过滤器元素完成可变高度标题文本的想法。 header-text 元素和 filter 元素都必须是同级元素。

Answer 1

这不是 flex 祖先的问题。删除它似乎对 IE11 或 Chrome 没有任何影响。看起来是绝对定位的渲染差异。

您可以通过使列成为弹性容器来解决此问题。

revised codepen

.flexAncestor {
  display: flex;
}

tr {
  display: flex;     /* gives full height to children */
  height: 250px;     /* for demo only */
}

.col1 {
  display: inline-flex;
  flex-direction: column;
  width: 100px;
  background: pink;
}

.col2 {
  display: inline-flex;
  flex-direction: column;
  width: 100px;
  background: lightblue;
}

.ui-column-title {
  margin: auto;     /* flex auto margin; see below */
}

.ui-column-filter {
  align-self: center;
  margin-bottom: 10px;
  width: calc(100% - 15px);
}

<div class="flexAncestor">
  <div class="tableContainer">
    <table class="testDataTable">
      <thead>
        <tr>
          <th class="col1">
            <span class="ui-column-title">id</span>
            <input class="ui-column-filter" type="text" />
          </th>
          <th class="col2">
            <span class="ui-column-title">Wrapping column header inside flex ancestor throws layout off in IE11 </span>
            <input class="ui-column-filter" type="text" />
          </th>
        </tr>
      </thead>
    </table>
  </div>
</div>

在此处了解有关 flex auto 边距的更多信息：

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 2

如前所述，它与 Flexbox 无关，它基于 position: relative 对表格元素的影响是未定义的，这里有很好的描述：

• Using Position Relative/Absolute within a TD?

---

在这种情况下，事实证明，在堆栈向上固定height: 100% 可以解决绝对定位问题，因此如果添加此规则，它也可以在 IE 中工作。

.tableContainer, table, thead, tr, th { height: 100% }

源：https://davidwalsh.name/table-cell-position-absolute

堆栈sn-p

.flexAncestor {
  display: flex;
}

.tableContainer {
  flex: 1 0 auto; /* not sure if needed. */
}

.tableContainer, table, thead, tr, th {            /*  added  */
  height: 100%
}

.ui-column-title {
  margin-bottom: 100px;
  display: inline-block;
  white-space: normal;
}

.ui-column-filter {
  position: absolute;
  bottom: 10px;
  left: 5px;
  width: calc(100% - 15px);
}

.testDataTable th {
  position: relative;
}

.col1 {
  width: 100px;
  background: pink;
}

.col2 {
  width: 100px;
  background: lightblue;
}

<div class="flexAncestor">
  <div class="tableContainer">
    <table class="testDataTable">
      <thead>
        <tr>
          <th class="col1">
            <span class="ui-column-title">id</span>
            <input class="ui-column-filter" type="text" />
          </th>
          <th class="col2">
            <span class="ui-column-title">Wrapping column header inside flex ancestor throws layout off in IE11 </span>
            <input class="ui-column-filter" type="text" />
          </th>
        </tr>
      </thead>
    </table>
  </div>
</div>