css - неожиданный разрыв строки в <li>с отображением элементов: flex в Internet Explorer (и Edge) - PullRequest
Новая
       44

css - неожиданный разрыв строки в <li>с отображением элементов: flex в Internet Explorer (и Edge)

0 голосов
/ 10 января 2019

Я не уверен, что это ошибка в Internet Explorer (11) и Edge. Может быть, я делаю что-то не так.

Ниже приведены простые HTML и CSS: 

ul {
  background: green;
}

li {
  background: yellow;
}

div {
  display: flex;
  background: red;
  width: 50%;
}
<ul>
  <li>
    <div>
      <div>foo</div>
      <div>bar</div>
    </div>
  </li>
  <li>
    <div>
      <div>foo</div>
      <div>bar</div>
    </div>
  </li>
</ul>

https://jsfiddle.net/mqLykvs8/3/

В Internet Explorer и Edge перед символом "foo" стоит разрыв строки, которого я не ожидаю и не отображаю в любом другом браузере.

Спасибо за любые предложения.

Ответы [ 2 ]

0 голосов
/ 11 января 2019

Другое решение - установить позицию для DIV, как показано ниже ( Работать только для IE и MS Edge ). 

<!doctype html>
<head>
<style>
ul {
  background:green;
}

li {
 background:yellow; 

}

div {
  display:flex;
  background:red;
  width:50%;
}
</style>
</head>
<body>
<ul>
  <li>
    <div style="position:absolute;">
      <div style="position:relative;">foo</div>
      <div style="position:relative;">bar</div>
    </div>
  </li>
  <li>
    <div style="position:absolute;">
      <div style="position:relative;">foo</div>
      <div style="position:relative;">bar</div>
    </div>
  </li>
</body>
</html>

Вывод в IE и Edge:

enter image description here

Примечание. Этот пример предназначен для устранения проблемы в IE и MS Edge. Если вы запустите этот пример в других браузерах, это может привести к противоречивым результатам.

0 голосов
/ 10 января 2019

Кажется, есть несколько проблем с IE и flex. Я нашел решение, которое использует другой метод выравнивания div рядом друг с другом, чтобы решить вашу проблему.

HTML: 

<ul>
  <li>
    <div class="container">
      <div>foo</div>
      <div>bar</div>
    </div>
  </li>
  <li>
    <div class="container">
      <div>foo</div>
      <div>bar</div>
    </div>
  </li>
</ul>

CSS: 

ul {
  background:green;
}

li {
  background:yellow; 
}

.container {
  background: red;
  width: 50%;
}

.container > div {
  display: inline-block;
  width: calc(50% - 2px);
}

В этом решении используется display: inline-block, чтобы элемент div находился рядом друг с другом и определял ширину элемента до минимума, прежде чем он поместит div в следующую строку.

...