Question

为什么Microsoft Edge浏览器会忽略div宽度，即80rem（800px）？这是供实时参考的网站：//已删除

正常方式（应该显示）：

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

使用的网格（用于行和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％。

我建议您将p d q 3 0 2用于行而不是display: flex用于列。

Codepen demo。

Css：

float: left

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

或者您可以使用肮脏的技巧：在计算列宽时设置99％而不是100％。

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

Answer 2

这很好。请更新您的Microsoft EDGE。在我这端工作得很好

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

2 个答案: