How can I make this layout look the same in both Chrome and IE 11?

E

eugene1592019-10-26 11:54:54

Internet Explorer

eugene159, 2019-10-26 11:54:54

There is this code:

The code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Flex</title>
</head>
<body>
<style>
  .top-menu {
    padding-top: 30px;
    padding-bottom: 13px;
    padding-left: 0;
    display: flex;
  }
  .top-menu__item {
    display: flex;
    align-items: center;
    padding-left: 18px;
    padding-right: 18px;
  }
  .top-menu__item:nth-last-of-type(n+2) {
    border-right: 1px solid #96be4e;
  }
  .top-menu__link {
    font-weight: bold;
    text-transform: uppercase;
    color: #000;
    font-size: 14px;
  }
</style>
<ul class="top-menu">
  <li class="top-menu__item">
    <a href="#" class="top-menu__link">Пункт 1</a>
  </li>
  <li class="top-menu__item">
    <a href="#" class="top-menu__link">Пункт 2</a>
  </li>
  <li class="top-menu__item">
    <a href="#" class="top-menu__link">Пункт 3</a>
  </li>
  <li class="top-menu__item">
    <a href="#" class="top-menu__link">Пункт-4</a>
  </li>
  <li class="top-menu__item">
    <a href="#" class="top-menu__link">Пункт-5</a>
  </li>
  <li class="top-menu__item">
    <a href="#" class="top-menu__link">Пункт-6</a>
  </li>
  <li class="top-menu__item">
    <a href="#" class="top-menu__link">Пункт 7 с каким-то текстом "какой-то текст"</a>
  </li>
  <li class="top-menu__item">
    <a href="#" class="top-menu__link">Пункт 8 тоже с текстом "какой-то текст"</a>
  </li>
  <li class="top-menu__item">
    <a href="#" class="top-menu__link">Пункт 9</a>
  </li>
</ul>
</body>
</html>

It renders differently in Chrome and IE 11 . I am attaching a screenshot.

UPD:
Another question on the same topic. If I set the block .top-menu__itemto flex-basis: 0;, Chrome and IE will have different results. I am attaching a screenshot.

How to make it look the same in IE as in Chrome? On flex's, not on floats or inlines. I'm interested in fixing a bug, not changing the layout.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Ankhena, 2019-10-27
@Ankhena

Replace indents with pseudo-elements. If necessary, use non-breaking spaces, non-breaking dashes, soft hyphens, etc.
Flex bugs https://github.com/philipwalton/flexbugs