IE11中两个元素之间的导航差距

Question

导航栏和IE11中导航栏下方的HTML元素之间存在间隙。样式可在Safari和Chrome上使用。仅在IE上没有。

从上图可以看到，在导航和下面的元素之间的填充中添加了两个像素。我正在使用Sass和Tailwind。我找不到此问题的出处。

    <div class="js-text-controller-options c-text-controller__options hidden" id="text-controls">
        <div class='c-text-controller__languages'>
          {% do action('icl_language_selector') %}
        </div>
        <div class="c-text-controller__sizer">
          <em class="c-text-controller__sizer-text">
            {{__('Adjust text size', 'accessnyctheme')}}
          </em>
          <button class="c-text-controller__sizer-btn btn-text js-text-larger">
            <svg class="icon icon-ui-plus-circle">
              <use xlink:href="#icon-ui-plus-circle"></use>
            </svg>
            <div class="sr-only">{{__('Larger', 'accessnyctheme')}}</div>
          </button>
          <button class="c-text-controller__sizer-btn btn-text js-text-smaller">
            <svg class="icon icon-ui-minus-circle">
              <use xlink:href="#icon-ui-minus-circle"></use>
            </svg>
            <div class="sr-only">{{__('Smaller', 'accessnyctheme')}}</div>
          </button>
        </div>
      </div>
    </div>
  </div>

  <nav class="o-navigation color-dark-background">
    <div class="logo-access">
      <a href="{{ urlBase }}/">
        <svg class="icon icon-logo-full">
          <use xlink:href="#icon-logo-full"></use>
        </svg><span class="sr-only">{{__('Access NYC', 'accessnyctheme')}}</span>
      </a>
    </div>

    <nav class="o-navigation__nav nav-inline print:hidden" data-js="site-desktop-nav">{% spaceless %}
      <a class="screen-desktop:hidden" href="#o-mobile-nav" data-js="toggle-nav">
        {{__('Menu', 'accessnyctheme')}}
      </a>
      {% include 'partials/nav.twig' with {this: {style: 'hidden screen-desktop:inline-block'}} %}
      <a class="td-inherit js-toggle-search" href="#search">
        <svg class="icon icon-ui-search">
          <use xlink:href="#icon-ui-search"></use>
        </svg>
        {{__('Search', 'accessnyctheme')}}
      </a>
    {% endspaceless %}</nav>
  </nav>

  <div class="o-mobile-nav color-mid-background print:hidden" id="o-mobile-nav">
    <a class="o-mobile-nav__close" href="#o-mobile-nav" data-js="toggle-nav">
      {{__('close &amp; return to site', 'accessnyctheme')}}
      <svg class="icon icon-ui-x">
        <use xlink:href="#icon-ui-x"></use>
      </svg>
    </a>

    <div class="o-mobile-nav__inner">
      <h4 class="o-mobile-nav__header">
        {{__('Get help now', 'accessnyctheme')}}
      </h4>

      <nav class="nav-block">
        {% include 'partials/nav.twig' %}
        <a href="{{ urlBase }}/?s=">
          <svg class="icon icon-ui-search">
            <use xlink:href="#icon-ui-search"></use>
          </svg>{{__('Search', 'accessnyctheme')}}
        </a>
      </nav>
    </div>
  </div>

  <div class="o-search-box js-search-box print:hidden" id="search" aria-hidden="true">
    <div class="o-search-box__inner">
      <div class="usa-grid">
        <div class="usa-width-one-whole">
          <a class="o-search-box__close js-hide-search" href="#content">
            <svg class="icon icon-ui-x">
              <use xlink:href="#icon-ui-x"></use>
            </svg><span class="sr-only">{{__('Close search', 'accessnyctheme')}}</span>
          </a>

这是HTML base.twig模板。这是导航栏的样式。

/**
 * Nav
 */

// Dependencies
@import 'config/fonts';
@import 'config/colors';
@import 'config/typography';
@import 'config/media';
@import 'config/direction';
@import 'config/dimensions';

// Declarations
@mixin nav-icon {
  svg {
    text-decoration: none;
  }

  .icon {
    margin-#{$text-direction-end}: .3em;
    vertical-align: middle;
    margin-top: -2px
  }
}

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

  .active {
    font-weight: $font-weight-bold;
  }

  @include nav-icon;
}

.nav-block {
  @include typography-nav();
  list-style: none;
  margin: 0;
  padding: 0;

  a {
    display: block;
    border-bottom: 1px solid $color-grey-dark;
    padding: $spacing-base 0
  }

  .active {
    font-weight: $font-weight-bold;
  }

  @include nav-icon;
}

我有根据的猜测是必须与display标签有关，但似乎找不到问题所在。这就是它在镀铬中的外观，它是理想状态。 这是一个带有基本html模板和某些样式的JS小提琴。由于项目的规模，上传所有样式非常困难。 https://jsfiddle.net/ky950382/2/