Блок отображения SVG вызывает разрыв между элементами в IE 11

Question

Я знаю, что Internet Explorer плохо работает с SVG.Я заметил, что при изменении display: block на display: flex действительно уменьшается размер зазора.однако это не удаляет его.

Я объявляю height и width в стилях, но проблема, кажется, сохраняется в IE11

// Declarations
.o-navigation {
  align-items: center;
  display: flex;
  @include font-smooth;
  padding: (.5 * $spacing-base) $spacing-base;

  .logo-access {
    .icon-logo-full {
      width: 135px;
      height: 23px;
      display: block;

      @media screen and (min-width: $screen-desktop) {
        .home & {
          width: 270px;
          height: 45px;
        }
      }
    }
  }
}

https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS/blob/master/src/objects/navigation/_navigation.scss

Откуда может возникнуть проблема?

Answer 1

После использования инструментов разработчика F12 для проверки стиля CSS, я думаю, что проблема вызвана различным способом рендеринга в IE11, который приводит к тому, что «o-navigation color-dark-background» имеет различную высоту в IE11 и других браузерах. Вы можете присвоить «o-navigation color-dark-background» конкретное значение высоты, знакомое со значением в других браузерах. Здесь я пытаюсь установить значение высоты 52px, а затем пропасть исчезает. Как это:

Answer 2

IE не очень хорошо работает с SVG.Другой ответ на этот пост, касающийся добавления стиля высоты к странице, похоже, работает, и многие другие посты, касающиеся этой проблемы, направлены именно на это решение.Для меня это было добавлением overflow: hidden к ссылкам в навигации.

.nav-inline {
  @include typography-nav();
  list-style: none;
  text-align: $text-direction-end;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;

  a {
    display: inline-block;
    margin-#{$text-direction-start}: 1em;
    overflow: hidden;
  }