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

Question

我知道 Internet Explorer 不能很好地处理 SVG。我注意到当更改display: block为do 时display: flex会减小间隙的大小。但是它不会删除它。

我正在声明height和width样式，但问题似乎在 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

问题可能来自哪里？

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