表格中的IE11 flexbox-文字未换行

时间：2019-01-11 17:54:30

标签： css css3 html-table flexbox internet-explorer-11

这个问题使我发疯。我试图实现我在Google和SO上找到的所有答案。我只希望图像下的文本像在该容器中的所有其他浏览器一样正确包装在IE11中。内容是具有flexbox属性的表。我已将容器设置为设定的宽度。当我允许输液时，它不会包裹在任何地方。但我并不担心。我尝试过向孩子，父母和祖父母添加width:100%和max-width:100%。我也尝试过在所有可以想到的地方添加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

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

1 个答案:

答案 0 :(得分：1)

在HTML中，没有诸如“具有弹性框属性的<table>” 之类的东西。

CSS Level 2规范中定义的CSS table-model对于哪些元素可以是什么元素以及在什么条件下可以是子元素具有特定的规则。

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

这些规则对于表显示模型及其如何生成列大小很重要。您还应该注意，表模型是用于渲染的非常复杂且缓慢的模型，并且在处理50多个项目时会注意到性能问题，特别是如果您在每个单元格上执行DOM操作时，情况并非如此。模型，flexbox模型或网格布局模型。

在某些浏览器中代码“有效” 的事实是无关紧要的。由于您的CSS规则无效，因此浏览器可以自由执行自己认为最佳的操作，并且由于没有官方的建议，浏览器因浏览器而异。

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

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

  1. 使用<table>：

<table>
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;  
}

  1. 使用flexbox：

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

相关问题
最新问题