table 中的 IE11 flexbox - 文本不换行

Question

这个问题快把我逼疯了。我已经尝试实现我在 Google 和 SO 上找到的每一个答案。我只希望图像下的文本在 IE11 中正确换行，就像其他浏览器在此容器中所做的那样。内容是具有 flexbox 属性的 table。我已将容器设置为设定宽度。当我允许液体时，它不会包裹任何地方。但我并不担心。我尝试将 width:100% 和 max-width:100% 添加到 children、parents 和 grandparents。我也尝试在我能想到的任何地方添加 flex-basis:100% 。如有任何帮助，我们将不胜感激。

body {
  box-sizing: border-box;
}

.container {
  width: 500px;
  
  z-index: 1000;
  float: none;
  padding: .1rem 0;
  margin: 0 auto;
  font-size: 0.9rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.15);
  border-bottom: .5rem solid #008938;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  overflow-x: hidden;
}
.p-3 {
    padding-right: 1rem !important;
}

.text-center {
    text-align: center!important;
}

.d-flex {
  display: flex !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-fill {
    flex: 1 1 auto!important;
}

.align-items-stretch {
  align-items: stretch!important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-dark {
    color: #212529 !important;
}

.text-muted {
    color: #bbbbbb;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

img {
    padding-top: .75rem;
    padding-bottom: .75rem;
    color: #6c757d;
    text-align: left;
    caption-side: bottom;
}

a {
  text-decoration: none;
}

table {
  border-collapse: collapse;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class='container'>
    <table>
      <tr class="d-flex flex-row">
        <td class="d-flex align-items-stretch p-3">
          <a href="#" class="d-flex flex-column text-center">
            <div>
              <img src="https://via.placeholder.com/150x70" alt="Normal title" role="presentation">
            </div>
            <div class="flex-fill">
              <strong class="text-dark">Normal title</strong>
            </div>
            <div>
              <span class="text-muted text-nowrap">Valid from date to date</span>
            </div>
          </a>
        </td>
        <td class="d-flex align-items-stretch p-3">
          <a href="#" class="d-flex flex-column text-center">
            <div>
              <img src="https://via.placeholder.com/150x70" alt="normal title" role="presentation">
            </div>
            <div class="flex-fill">
              <strong class="text-dark">
                Extra super long title sa;ldjf;lsadf j;lsajf ;lfdskj;sa jfd;lksa kjfds;lkjsafd;l jdsaf
              </strong>
            </div>
            <div>
              <span class="text-muted text-nowrap">Valid from date to date</span>
            </div>
          </a>
        </td>
        <td class="d-flex align-items-stretch p-3">
          <a href="#" class="d-flex flex-column text-center align-items-center flex-wrap menu-flyer-link">
            <div>
              <img src="https://via.placeholder.com/150x70" alt="kind of long title" role="presentation">
            </div>
            <div class="flex-fill align-self-stretch">
              <strong class="text-dark">Long title that is supposed to span 2 lines</strong>
            </div>
            <div>
              <span class="text-muted text-nowrap">Valid from date to date</span>
            </div>
          </a>
        </td>
      </tr>
    </table>
  </div>
</body>
</html>

这也是示例的 JSBin：https://jsbin.com/qewijuhoco/1/edit?html,css,output

JSFiddle 不再支持 IE11 所以不得不使用 JSBin

更新： 如果有任何不同，我尝试用 <div> 标签替换所有 <table>, <tr>, and <td> 标签。这似乎没有任何影响。

Answer 1

HTML中没有"a <table> with flexbox properties"这样的东西。

CSS table-model 在 CSS 级别 2 规范中定义了关于哪些元素可以是哪些元素的子元素以及在哪些条件下的特定规则。

在您的示例中，您不能将 display:flex 元素作为 display:table-row-group 元素的直接子元素。此外，如果 <tr>（display:table-row 元素）直接放在 <table> 元素下，您会注意到浏览器会自动添加一个 <tbody>（display:table-row-group）包装器他们。

这些规则对于 table 显示模型及其生成列大小的方式很重要。您还应该注意 table 模型是一个非常复杂且渲染速度慢的模型，当处理超过 50 个项目时，您会注意到性能问题，尤其是当您对每个单元格执行 DOM 操作时, 盒模型、弹性盒模型或网格布局模型不是这样。

您的代码 "works" 在某些浏览器中的事实无关紧要。由于您的 CSS 规则无效，因此浏览器可以自由地执行他们认为最佳的操作，这因浏览器而异，因为没有官方建议。

有几种方法可以修复您的布局，但您可能想要从 <tr> 和 <td> 中删除 d-flex 并将 <td> 内容包装在d-flex 根据您的需要包装（=> 解决方案 1）。

另请注意，使用 <table> 元素进行布局通常被认为是一个坏主意（=> 解决方案 2）。

使用 <table>s：

body {
  box-sizing: border-box;
}
.container {
  width: 500px;
  padding: .1rem 0;
  margin: 0 auto;
  font-size: 0.9rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.15);
  border-bottom: .5rem solid #008938;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  overflow-x: hidden;
}

.text-center {
    text-align: center!important;
}

.d-flex {
  display: flex !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-fill {
    flex: 1 1 auto!important;
}

.align-items-stretch {
  align-items: stretch!important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-dark {
    color: #212529 !important;
}

.text-muted {
    color: #bbbbbb;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

img {
    padding-top: .75rem;
    padding-bottom: .75rem;
    color: #6c757d;
    text-align: left;
    caption-side: bottom;
}
td {
  position: relative;
}
a {
  text-decoration: none;
}
td > a > * {
  flex-grow: 0;
}
td > a > .flex-fill {
  flex-grow: 1;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
td {
  width: 33.33%;
  vertical-align: top;  
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class='container'>
    <table>
      <tr>
        <td>
          <a href="#" class="d-flex flex-column text-center">
            <div>
              <img src="https://via.placeholder.com/150x70" alt="Normal title" role="presentation">
            </div>
            <div class="flex-fill">
              <strong class="text-dark">Normal title</strong>
            </div>
            <div>
              <span class="text-muted text-nowrap">Valid from date to date</span>
            </div>
          </a>
        </td>
        <td>
          <a href="#" class="d-flex flex-column text-center">
            <div>
              <img src="https://via.placeholder.com/150x70" alt="normal title" role="presentation">
            </div>
            <div class="flex-fill">
              <strong class="text-dark">
                Extra super long title sa;ldjf;lsadf j;lsajf ;lfdskj;sa jfd;lksa kjfds;lkjsafd;l jdsaf
              </strong>
            </div>
            <div>
              <span class="text-muted text-nowrap">Valid from date to date</span>
            </div>
          </a>
        </td>
        <td>
          <a href="#" class="d-flex flex-column text-center align-items-center flex-wrap menu-flyer-link">
            <div>
              <img src="https://via.placeholder.com/150x70" alt="kind of long title" role="presentation">
            </div>
            <div class="flex-fill align-self-stretch">
              <strong class="text-dark">Long title that is supposed to span 2 lines</strong>
            </div>
            <div>
              <span class="text-muted text-nowrap">Valid from date to date</span>
            </div>
          </a>
        </td>
      </tr>
    </table>
  </div>
</body>
</html>

使用 flexbox：

body {
  box-sizing: border-box;
}

.container {
  width: 500px;
  z-index: 1000;
  float: none;
  padding: .1rem 0;
  margin: 0 auto;
  font-size: 0.9rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .15);
  border-bottom: .5rem solid #008938;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  overflow-x: hidden;
}

.p-3 {
  padding-right: 1rem !important;
}

.text-center {
  text-align: center!important;
}

.d-flex {
  display: flex !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-fill {
  flex: 1 0 auto!important;
}

.align-items-stretch {
  align-items: stretch!important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-dark {
  color: #212529 !important;
}

.text-muted {
  color: #bbbbbb;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

img {
  padding-top: .75rem;
  padding-bottom: .75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}

a {
  text-decoration: none;
}

table {
  border-collapse: collapse;
}
.row {
  display: flex;
  width: 100%;
}
.row > div {
  flex: 0 1 33%;
  padding: 0 .5rem .5rem;
  box-sizing: border-box;
  display: fLex;
  flex-direction: column;
}
.row > div > a {
  flex-grow: 1;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class='container'>
    <div class="row">
      <div>
        <a href="#" class="d-flex flex-column text-center">
          <div>
            <img src="https://via.placeholder.com/150x70" alt="Normal title" role="presentation">
          </div>
          <div class="flex-fill">
            <strong class="text-dark">Normal title</strong>
          </div>
          <div>
            <span class="text-muted text-nowrap">Valid from date to date</span>
          </div>
        </a>
      </div>
      <div>
        <a href="#" class="d-flex flex-column text-center">
          <div>
            <img src="https://via.placeholder.com/150x70" alt="normal title" role="presentation">
          </div>
          <div class="flex-fill">
            <strong class="text-dark">
                Extra super long title sa;ldjf;lsadf j;lsajf ;lfdskj;sa jfd;lksa kjfds;lkjsafd;l jdsaf
              </strong>
          </div>
          <div>
            <span class="text-muted text-nowrap">Valid from date to date</span>
          </div>
        </a>
      </div>
      <div>
        <a href="#" class="d-flex flex-column text-center align-items-center flex-wrap menu-flyer-link">
          <div>
            <img src="https://via.placeholder.com/150x70" alt="kind of long title" role="presentation">
          </div>
          <div class="flex-fill align-self-stretch">
            <strong class="text-dark">Long title that is supposed to span 2 lines</strong>
          </div>
          <div>
            <span class="text-muted text-nowrap">Valid from date to date</span>
          </div>
        </a>
      </div>
    </div>
  </div>
</body>

</html>

注意我没有清理它们。我的建议：从头开始，不要使用 !important.

table 中的 IE11 flexbox - 文本不换行

IE11 flexbox in table - text not wrapping

css

html-table

flexbox

internet-explorer-11