如何修复CSS网格布局的跨浏览器兼容性？

Question

我已经成功地创建了一个CSS网格布局。但是，现在我想添加对不支持或不支持的浏览器的支持或后备，特别是IE11。

我添加了浏览器前缀，阅读了一百万篇关于添加浮动的文章，等等。我创建了一个应该可以工作的代码块，但在IE11 (我有一台不能访问PC的Mac笔记本电脑)上测试时，我终生无法让它呈现出来。

// sass-lint:disable no-important no-vendor-prefixes no-duplicate-properties final-newline

// Grid Variables
$cols: 12 !default;
$gutter: 50px !default;

// Breakpoints
$lg: 1199.98px;
$md: 991.98px;
$sm: 767.98px;
$xs: 575.98px;

$breakpoints: (
  (l, $lg, 100%, 1),
  (m, $md, 100%, 2),
  (s, $sm, 100%, 2),
  (x, $xs, 100%, 3),
  (no, 0, 100%, 3)
) !default;

// Typography
$font-size: 20px;
$font-family: 'BrokenEn', serif;
$line-height: 1.4;

// Animations
$grid-animation: all .15s ease-in-out;
$grid-animation-slow: all .3s ease-in-out;

// Globals

*,
*::after,
*::before {
  backface-visibility: hidden;
}

html {
  box-sizing: border-box;
  margin: 0;
  overscroll-behavior: none;
  padding: 0;
}

body {
  background-color: #fff;
  border: 0;
  box-sizing: inherit;
  color: #000;
  font: normal 1rem $font-family;
  height: 100%;
  left: 0;
  line-height: 1;
  margin: 0;
  overflow-x: hidden;
  padding: 0;
  position: relative;
}

// Grid
header,
main,
footer {
  background-color: #f5f5dc;
  width: 100%;
}

.r {
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  background-color: #7fffd4;
  display: -ms-grid !important;
  display: grid !important;
  grid-gap: $gutter;
  grid-template-columns: repeat($cols, 1fr);
  position: relative;
  transition: $grid-animation;
}

[class*='c-'] {
  -ms-grid-column-span: $cols;
  background-color: #faebd7;
  grid-column: span $cols;
  position: relative;

  &.nest {
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    background-color: #7fffd4;
    display: -ms-grid !important;
    display: grid !important;
    grid-gap: $gutter;
    grid-template-columns: repeat($cols, 1fr);
    position: relative;
  }

  &.contain-auto {
    margin-left: $gutter;
    margin-right: $gutter;
  }

  &.contain-fixed {
    margin-left: auto;
    margin-right: auto;
    width: $lg;
  }
}

.col-wrap {
  display: inline-block;
  padding: 0 $gutter;
  width: 100%;
}

.no-c-gap {
  grid-column-gap: 0 !important;
}

@for $i from 1 through $cols {
  .c-#{$i} {
    -ms-grid-column-span: $i;
    grid-column: span $i;
  }
}

@each $name, $size, $container, $divide in $breakpoints {
  @media only screen and (max-width: $size) {
    .r {
      grid-gap: $gutter / $divide;
    }

    [class*='c-'] {
      &.nest {
        grid-gap: $gutter / $divide;
      }

      &.contain-auto {
        margin-left: $gutter / $divide;
        margin-right: $gutter / $divide;
      }
    }

    @for $i from 1 through $cols {
      .#{$name}#{$i} {
        -ms-grid-column-span: $i;
        grid-column: span $i;
      }
    }
  }
}

@supports not (display: grid) {
  .r {
    display: inline-block !important;
    width: 100% !important;

    ::after {
      content: ' ';
      display: block;
      width: 100%;
    }

    [class*='c-'] {
      display: block !important;
      float: left !important;
      margin: 0 $gutter $gutter 0;
    }
  }

  @for $i from 1 through $cols {
    .c-#{$i} {
      width: calc((100% / #{$cols} * #{$i}) - #{$gutter}) !important;
    }
  }

  @each $name, $size, $container, $divide in $breakpoints {
    @media only screen and (max-width: $size) {
      @for $i from 1 through $cols {
        .#{$name}#{$i} {
          width: calc((100% / #{$cols} * #{$i}) - #{$gutter}) !important;
        }
      }
    }
  }
}

// If @support not supported by browser.
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .r {
    display: inline-block !important;
    width: 100% !important;

    ::after {
      content: ' ';
      display: block;
      width: 100%;
    }

    [class*='c-'] {
      display: block !important;
      float: left !important;
      margin: 0 $gutter $gutter 0;
    }
  }

  @for $i from 1 through $cols {
    .c-#{$i} {
      width: calc((100% / #{$cols} * #{$i}) - #{$gutter}) !important;
    }
  }

  @each $name, $size, $container, $divide in $breakpoints {
    @media only screen and (max-width: $size) {
      @for $i from 1 through $cols {
        .#{$name}#{$i} {
          width: calc((100% / #{$cols} * #{$i}) - #{$gutter}) !important;
        }
      }
    }
  }
}

谁能帮我看一下代码，告诉我如何(1)改善我的网格，(2)让"@supports not (display: grid)“代码在IE11中工作？

编辑：

这将是一个例子，说明它在所有现代浏览器中的外观，以及我希望它在IE后备启动后的外观。

​

​

<body>
    <header class="r">Header</header>
    <main class="r">
        <section class="c-12 nest ratio-4-3">
            <div class="c-6">
                <div class="wrap">Div Left</div>
            </div>
            <div class="c-6">
                <div class="wrap">Div Left</div>
            </div>
        </section>
        <section class="c-12 nest no-c-gap ratio-4-3">
            <div class="c-6">
                <div class="wrap">Div Left</div>
            </div>
            <div class="c-6">
                <div class="wrap">Div Left</div>
            </div>
        </section>
    </main>
    <footer class="r">Footer</footer>
</body>

Answer 1

1. @supports不是supported in IE，所以对于支持网格的浏览器，你必须在其中放入代码。它应该覆盖你的非网格代码。(去掉“not”)。
2. 网格在IE中是唯一的partly supported，因此您最好使用polyfill来支持浏览器中的部分选项。
3. 如果您需要进行大量跨浏览器测试，请使用诸如BrowserStack.

之类的工具

编辑:建议一个行动方案。

我建议使用这种方法。

使用CSS Grid以外的布局技术重写所有内容。多年来，人们已经在没有网格的情况下进行跨浏览器、高性能、响应式的布局。这可能适用于您所有的目标浏览器。如果在这一点上，你通过使用CSS Grid得到了更好的东西，使用它作为渐进式增强。

原因是，我建议这是一种不同的布局技术，可能需要额外的容器/包装器来强制更改您的标记。这将很难添加这些，只有“当网格不工作时”。