IE11 Flex-контейнер переполняется внутри таблицы - PullRequest
Новая
       31

IE11 Flex-контейнер переполняется внутри таблицы

0 голосов
/ 26 мая 2020

Ознакомьтесь с приведенным ниже примером кода в IE11 и Google Chrome.

В Chrome он отображается так, как я ожидал, но в IE11 таблица расширяется и становится намного шире, чем содержащий блок . Похоже, это вызвано display: flex - удаление стилей display, flex-direction и justify-content заставляет все встать на свои места.

Я бы хотел, чтобы IE11 отображал мой контент таким же образом что Google Chrome делает. Я бы настоятельно предпочел не менять разметку, если это вообще возможно. , но ничто из того, что я пробовал, не изменило эффекта. Установка max-width на div.flex * ДЕЙСТВИТЕЛЬНО работает, но я бы предпочел сохранить эту динамику c, если возможно. 

<html>

<body>
  <style>
    div.wrapper {
      background-color: lightgrey;
      width: 500px;
    }
    
    div.flex {
      border: 1px solid blue;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    table.wrapper-table div.flex {
      border: 1px solid green;
    }
  </style>
  <div class="wrapper">
    <div class="flex">
      <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
      <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
    </div>
    <table class="wrapper-table">
      <tbody>
        <tr>
          <td>
            <div class="flex">
              <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
              <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

1 Ответ

1 голос
/ 26 мая 2020

Вы сказали, что «удаление стилей display, flex-direction и justify-content заставляет все вернуться на свои места».

Если вы можете идентифицировать браузер IE и применить указанный стиль c, то вы можете обратиться к этому примеру. 

<html>

<body>
  <style>
@supports not (-ms-high-contrast: none) {
    div.wrapper {
      background-color: lightgrey;
      width: 500px;
    }
    
    div.flex {
      border: 1px solid blue;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    table.wrapper-table div.flex {
      border: 1px solid green;
    }
}

  
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   div.wrapper {
      background-color: lightgrey;
      width: 500px;
    }
    
    div.flex {
      border: 1px solid blue;
     
    }
    
    table.wrapper-table div.flex {
      border: 1px solid green;
    }
}
  </style>
  <div class="wrapper">
    <div class="flex">
      <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
      <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
    </div>
    <table class="wrapper-table">
      <tbody>
        <tr>
          <td>
            <div class="flex">
              <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
              <p>This is some text that is quite a lot longer than the width of the content and therefore must wrap around to new lines</p>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

Вывод:

enter image description here

Таким образом, вам не нужно вносить никаких изменений в разметке, и вы получите аналогичный результат в браузере IE.

Кроме того, вы можете изменить код в соответствии с вашими требованиями.

...