Microsoft Edge 浏览器完全忽略 div 宽度

Question

为什么 Microsoft Edge 浏览器会忽略 div 宽度，即 80rem (800px)？ 这是现场参考的网站：//removed

正常方式（应该显示）：

这是 Microsoft Edge 的显示方式：

HTML：

<section class="section-features">
        <div class="row">
          <div class="col-1-of-3">
            <div class="feature-box">
              <a href="#" class="feature-box__link js--scroll-to-ari">
                <img class="feature-box__img" src="./img/arikinnisvara.png" alt="Ärikinnisvarahaldus">
              </a>
              <a href="#" class="feature-box__link js--scroll-to-ari">
                <h2 class="heading heading--sub feature-box__heading">Ärikinnisvara- <span class="feature-box__break">haldus</span></h2>
              </a>
            </div>
          </div>
          <div class="col-1-of-3">
            <div class="feature-box">
              <a href="#" class="js--scroll-to-elamu">
                <img class="feature-box__img" src="./img/elamu.png" alt="Elamuhaldus">
              </a>
              <a href="#" class="feature-box__link js--scroll-to-elamu">
                <h2 class="heading heading--sub feature-box__heading">Elamu- <span class="feature-box__break">haldus</span></h2>
              </a>
            </div>
          </div>
          <div class="col-1-of-3">
            <div class="feature-box">
              <a href="#" class="js--scroll-to-kindlustus">
                <img class="feature-box__img" src="./img/kindlustus.png" alt="Kindlustuskahjude hindamine">
              </a>
              <a href="#" class="js--scroll-to-elamu feature-box__link">
                <h2 class="heading heading--sub feature-box__heading">Kindlustuskahjude <span class="feature-box__break">hindamine</span></h2>
              </a>
            </div>
          </div>

        </div>
        <div class="row">
          <div class="arrow-box">
            <a href="#" class="arrow-box__link js--scroll-to-ari"><span class="arrow-box__span arrow-box__span--1"></span><span class="arrow-box__span arrow-box__span--2"></span><span class="arrow-box__span arrow-box__span--3"></span></a>
          </div>
        </div>
      </section>

CSS（SCSS）：

.feature-box {
  display: flex;
  flex-direction: column;
  align-items: center;

  @include respond(tab-port) {
    margin-bottom: -3.5rem;
  }

  @include respond(phone) {
    margin-bottom: -5rem;
  }

  &__img {
    margin-right: 2rem;
    outline: none;
    -moz-user-focus: ignore;

    @include respond(tab-port) {
        margin-right: 0;
    }

    @include respond(phone) {
      margin-right: 0;
    }
  }

  &__link .feature-box__img {
    outline: none;
  }

  &__link {
    text-decoration: none;
  }

  &__heading {
    margin-top: 1.5rem;
    text-align: center;
    text-decoration: none;
  }

  &__break {
    display: block;
  }
}

使用的网格（用于 row 和 col-1-of-3 类引用）：

// GRID
$grid-width: 80rem;
$gutter-vertical: 8rem;
$gutter-vertical-small: 6rem;
$gutter-horizontal: 6rem;    

.row {
        max-width: $grid-width;
        margin: 0 auto;

    &:not(:last-child) {
        margin-bottom: $gutter-vertical;

        @include respond(tab-port) {
            margin-bottom: $gutter-vertical-small;
        }
    }

    @include respond(tab-port) {
        max-width: 50rem;
        padding: 0 3rem;
    }

    @include clearfix;

    [class^="col-"] {
        float: left;

        &:not(:last-child) {
            margin-right: $gutter-horizontal;

            @include respond(tab-port) {
                margin-right: 0;
                margin-bottom: $gutter-vertical-small;
            }
        }

        @include respond(tab-port) {
            width: 100% !important;
        }
    }

    .col-1-of-2 {
        width: calc((100% - #{$gutter-horizontal}) / 2);

    }

    .col-1-of-3 {
        width: calc((100% - 2 * #{$gutter-horizontal}) / 3);
    }

    .col-2-of-3 {
        width: calc(2 * ((100% - 2 * #{$gutter-horizontal}) / 3) + #{$gutter-horizontal});
    }

    .col-1-of-4 {
        width: calc((100% - 3 * #{$gutter-horizontal}) / 4);
    }

    .col-2-of-4 {
        width: calc(2 * ((100% - 3 * #{$gutter-horizontal}) / 4) + #{$gutter-horizontal});
    }

    .col-3-of-4 {
        width: calc(3 * ((100% - 3 * #{$gutter-horizontal}) / 4) + 2 * #{$gutter-horizontal});
    }

}

什么可能导致这个问题？有什么建议吗？

Answer 1

您的网格系统并不完美。
IE 似乎无法正确计算列的宽度，并且所有三列的总宽度都略大于 100%。

我建议您将display: flex 用于行而不是float: left 用于列。

Codepen demo.

CSS：

.row {
  display: flex;
}

[class^="col-"] {
  flex: 0 0 auto;
}

.row {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
}
.row:not(:last-child) {
  margin-bottom: 8rem;
}
.row [class^="col-"] {
  flex: 0 0 auto;
}
.row [class^="col-"]:not(:last-child) {
  margin-right: 6rem;
}
.row .col-1-of-2 {
  width: calc((100% - 6rem) / 2);
}
.row .col-1-of-3 {
  background: red;
  width: calc((100% - 2 * 6rem) / 3);
}
.row .col-2-of-3 {
  width: calc(2 * ((100% - 2 * 6rem) / 3) + 6rem);
}
.row .col-1-of-4 {
  width: calc((100% - 3 * 6rem) / 4);
}
.row .col-2-of-4 {
  width: calc(2 * ((100% - 3 * 6rem) / 4) + 6rem);
}
.row .col-3-of-4 {
  width: calc(3 * ((100% - 3 * 6rem) / 4) + 2 * 6rem);
}

<div class="row">
  <div class="col-1-of-3">1</div>
  <div class="col-1-of-3">1</div>
  <div class="col-1-of-3">1</div>
</div>

或者您可以使用脏 hack：在计算列宽时设置 99% 而不是 100%。

width: calc((99% - 2 * #{$gutter-horizontal}) / 3);

Answer 2

这工作正常。请更新您的 Microsoft EDGE。这在我的最后工作正常