Question

Эта проблема сводит меня с ума. Я пытался реализовать каждый ответ, который я нашел в 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>. Похоже, это никак не повлияло.

Andrei Gheorghiu · Answer 1 · 13 января 2019

В HTML нет такой вещи как "a <table> со свойствами flexbox" .

CSS таблица-модель , как определено в спецификациях CSS уровня 2, имеет конкретные правила относительно того, какие элементы могут быть дочерними по отношению к каким элементам и при каких условиях.

В вашем примере вы не можете иметь элементы display:flex в качестве непосредственных потомков элементов display:table-row-group. Кроме того, если <tr> (display:table-row элементы) размещены непосредственно под элементом <table>, вы заметите, что браузеры автоматически добавляют оболочку <tbody> (display:table-row-group) вокруг них.

Эти правила важны для модели отображения таблицы и того, как она генерирует размеры столбцов. Следует также отметить, что табличная модель является очень сложной и медленной моделью для рендеринга, и вы заметите проблемы с производительностью при работе с более чем 50 элементами, особенно если вы выполняете манипуляции с DOM в каждой ячейке, что не относится к блокам модель, модель flexbox или модель макета сетки.

Тот факт, что ваш код "работает" в некоторых браузерах, не имеет значения. Поскольку ваши правила CSS недействительны, браузеры могут делать то, что считают оптимальным, и это отличается от браузера к браузеру, поскольку для них нет официальных рекомендаций.

Существует несколько способов исправить макет, но вы, вероятно, хотите удалить d-flex из <tr> s и <td> s и обернуть содержимое <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.

IE11 flexbox в таблице - текст не переносится

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

IE11 flexbox в таблице - текст не переносится

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы