Question

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

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

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

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

Answer 1

灵活祖先不是问题。删除它似乎在IE11或Chrome中没有任何区别。它看起来像绝对定位的渲染差异。

您可以通过使列Flex容器来解决此问题。

revised codepen

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

点击此处了解有关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% }

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

Stack snippet

.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>

当祖先显示时，IE11表格布局中断：flex

2 个答案: