SVG显示块导致IE 11中元素之间的间隙

Question

I Know that internet explorer doesn't play nice with SVGs. I notice that when changing display: block to display: flex does decreases the size of the gap. however it doesn't remove it.

I am declaring height and width in the styles but the issue seems to persist in IE 11

// 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

Where might the issue come from?

Answer 1

After using F12 developer tools to check the CSS style, I think the problem is caused by the different rendering way in IE11 that leads to the "o-navigation color-dark-background" having different heights in IE11 and other browsers. You can give the "o-navigation color-dark-background" a specific height value familiar with the value in other browsers. Here I try to set the height value to 52px and then the gap disappears. Like this:

Answer 2

IE doesn't play well with SVGs. The other answer to this post regarding adding the height style to the page does seem to work, and many other post regarding this issue direct to that solution. What did it for me was adding overflow: hidden to the links in the nav.

.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;
  }