IE 11及更高版本对CSS网格的支持

Question

作为前身，我引用了此post；但是，关于我的问题，它没有任何收获。

我觉得我遵循了正确的语法，但是我的布局完全被破坏了，直言不讳。

  /* Global Overrides */
  .footer-containerlinks ul li {
    font-family: termina, sans-serif !important;
  }

  .content-asset .copyright {
    font-family: termina, sans-serif !important;
    font-size: 10px !important;
  }

  .homepage-slider {
    font-weight: bold !important;
  }

  .homepage-slider {
    font-family: termina, sans-serif;
    font-weight: 300;
    background-color: white;
    position: relative;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 0 !important
  }


  .global-slider.homepage-banner .homepage-slider p {
    font-style: normal;
    font-weight: 300;
  }

  .global-slider.homepage-banner .homepage-slider .row a,
  .global-slider.homepage-banner .homepage-slider .row a:hover {
    /*    background-color: #e87ea6 !important;*/
    color: #fff !important;
  }

  .global-slider.homepage-banner .homepage-slider .row a {
    border-radius: 0px;
  }

  .global-slider.homepage-banner .homepage-slider a:focus {
    outline: none;
  }

  .global-slider.homepage-banner .homepage-slider .button {
    line-height: inherit;
    height: inherit;
  }

  .global-slider.homepage-banner .homepage-slider .product-copy h2,
  .global-slider.homepage-banner .homepage-slider p {
    color: #000000;
  }

  img {
    outline: none;
  }

  .slice {
    position: relative;
  }

  .slice .cta-button {
    top: 90.1%;
    left: 12%;
    width: unset;
    position: absolute;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    color: #fff;
    bottom: inherit;
    text-align: center;
  }


  .global-slider.homepage-banner .homepage-slider .slick-dots {
    display: none;
  }

  .homepage-slider .slick-slide .banner-message {
    color: #fff;
    top: 57%;
  }

  .homepage-slider .slide a.full-link {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 50;
  }

  .homepage-slider .slick-slide img,
  .watch-video img,
  .grand-entrance img {
    width: 100%;
  }

  .homepage-slider .slick-slide picture,
  .homepage-slider .slick-slide picture>img {
    width: 100%;
    height: auto;
    line-height: 0;
    vertical-align: bottom;
  }

  .homepage-slider .slick-slide img,
  .watch-video img,
  .grand-entrance img {
    width: 100%;
  }

  .homepage-slider .slick-slide .banner-message {
    background-color: transparent;
  }

  .homepage-slider .slick-slide .banner-message p {
    margin: 23px 0 0 0;
    text-transform: none;
  }

  .homepage-slider .slick-slide .banner-message .button {
    background-color: #e87ea6;
    color: #fff;
    position: relative;
  }

  .homepage-slider .slick-slide .banner-message .button a:hover {
    color: #fff;
  }

  .homepage-slider .slick-slide .banner-message.banner-white h2 a,
  .homepage-slider .slick-slide .banner-message.banner-white p a {
    color: #fff;
  }

  .homepage-slider .slick-slide .banner-message h3 {
    text-transform: uppercase;
    margin: 10px 0;
  }

  .container {
    display: -ms-grid;
    display: grid;
    grid-gap: 20px 0;
    -ms-grid-columns: 1fr 0 1fr 0 1fr 0 1fr 0 1fr 0 1fr 0 1fr 0 1fr 0 1fr 0 1fr 0 1fr 0 1fr;
    grid-template-columns: repeat(12, 1fr);
  }

  .container>* {
    -ms-grid-column: 1;
    -ms-grid-column-span: 12;
    grid-column: 1/ span 12;
  }

  .oui-hero {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 12;
    grid-area: oui-hero;
    grid-row: 1;
    grid-column: 1/ span 12;
  }

  .new-fragrance-banner {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 12;
    grid-area: new-fragrance-banner;
    grid-row: 2;
    grid-column: 1/ span 12;
    max-width: 90%;
  }

  .product-one-container {
    grid-area: product-one-container;
    -ms-grid-row: 3;
    grid-row: 3;
  }

  .product-one-copy-container {
    grid-area: product-one-copy-container;
    -ms-grid-row: 4;
    grid-row: 4;
  }

  #oui-gift-set {
    max-width: 90%;
  }


  .product-one-copy-container .product-copy .button,
  .roll-over-collection-a .container-jc-gif-hero .banner-copy .button,
  .roll-over-collection-a .oui-recommend-1-container .button, .roll-over-collection-a .oui-recommend-2-container .button {
    margin-top: 5%;
    margin-bottom: 0;
    padding: 3px 8px;
    background-color: #e87ea6;
    border-color: #e87ea6;
    border-radius: 0;
    border-style: solid;
    border-width: 1px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    padding: .23em 2em;
    text-align: center;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    outline: 0;
    font-family: termina, sans-serif;
    font-weight: 500;
    font-style: normal;
    -webkit-font-kerning: none;
    -moz-font-kerning: none;
    font-kerning: none;
    text-transform: uppercase;
    line-height: inherit;
    height: inherit;
  }

  .roll-over-collection-a .container-jc-gif-hero .banner-copy .button {
    margin-top: 2%;
  }

  .product-one-copy-container .product-copy h2 {
    font-size: 1.5em
  }

  .product-one-copy-container .product-copy p {
    font-size: 15px
  }

  .new-fragrance-banner {
    max-width: 90%;
    margin: auto;
  }

  .short-copy {
    display: none
  }


  @media screen and (max-width:767px) {

    .homepage-slider .slick-slide .banner-message.oui .homepage-slider .slick-slide .banner-message .button {
      margin: 5px 0 0;
    }

    .homepage-slider .slick-slide .banner-message h2 {
      font-size: 24px;
      line-height: 25px;
      margin-bottom: 5px;
    }

    .homepage-slider .slick-slide .banner-message.oui,
    .homepage-slider .slick-slide .banner-message.banner-message.makeup {
      top: 50%;
      position: absolute;
      text-align: center;
      padding: 0;
    }

    .homepage-slider .slick-slide .banner-message.oui {
      top: 93%;
      left: 38.5%;
    }

    .homepage-slider .slick-slide .banner-message.banner-message.makeup {
      top: 91.7%;
      left: 35.5%;
    }

    .homepage-slider .slick-slide .banner-message .button {
      margin-top: 0;
    }

    .homepage-slider .slick-slide .banner-message.oui .button a,
    .homepage-slider .slick-slide .banner-message.oui .button a:hover {
      color: #fff;
    }
  }

  @media screen and (min-width:550px) {
    .container {
      grid-gap: 40px 40px;
              grid-template-areas:
        "oui-hero oui-hero"
        "new-fragrance-banner new-fragrance-banner"
        "product-one-container product-one-copy-container";
    }

    .product-one-container {
      margin: 8% 0 0 8%;
      grid-area: product-one-container;
      -ms-grid-column: 1;
      -ms-grid-column-span: 6;
      grid-column: 1 / span 6;
    }

    #oui-gift-set {
      margin-left: 10%
    }

    .product-one-copy-container {
      margin-top: 7%;
      grid-area: product-one-copy-container;
      -ms-grid-row: 3;
      grid-row: 3;
      -ms-grid-column: 7;
      -ms-grid-column-span: 6;
      grid-column: 7 / span 6;
    }

    .product-one-copy-container .product-copy h2,
    p {
      text-align: left
    }

    .product-one-copy-container .product-copy .button {
      float: left
    }
    .oui-hero {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
    }
    .new-fragrance-banner {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
    }
    .product-one-container {
        -ms-grid-row: 5;
        -ms-grid-column: 1;
    }
    .product-one-copy-container {
        -ms-grid-row: 5;
        -ms-grid-column: 3;
    }
    .oui-hero {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
    }
    .new-fragrance-banner {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
    }
    .product-one-container {
        -ms-grid-row: 5;
        -ms-grid-column: 1;
    }
    .product-one-copy-container {
        -ms-grid-row: 5;
        -ms-grid-column: 3;
    }
  }

  @media screen and (min-width:550px) {
    .product-one-container {
        -ms-grid-row: 5;
        -ms-grid-column: 1;
    }
    .product-one-copy-container {
        -ms-grid-row: 5;
        -ms-grid-column: 3;
    }
}

  @media screen and (min-width:550px) {
    .product-one-container {
        -ms-grid-row: 5;
        -ms-grid-column: 1;
    }
    .product-one-copy-container {
        -ms-grid-row: 5;
        -ms-grid-column: 3;
    }
}

  @media screen and (min-width:768px) {
    .new-fragrance-banner {
      max-width: 100%;
    }

    .long-copy {
      display: none;
    }

    .short-copy {
      display: block;
    }

    .product-one-copy-container {
      margin-top: 19%;
    }

    .roll-over-collection-a .oui-recommend-1-container .button, .roll-over-collection-a .oui-recommend-2-container .button {
      margin-top: 4%;
    }
  }

  @media screen and (min-width:1000px) {
    .product-one-copy-container {
      margin-top: 30%;
      margin-left: 20%;
      -ms-grid-column: 7;
      -ms-grid-column-span: 5;
      grid-column: 7 / span 5;
    }
  }


  /* tablet */
  @media screen and (min-width:768px) and (max-width:1023px) {
    .slice .cta-button {
      top: 96%;
      left: 41%;
    }
  }


  /*smart-phone*/
  @media screen and (min-width:480px) and (max-width:767px) {
    .global-slider.homepage-banner .homepage-slider .slick-dots {
      bottom: 1.7%;
    }

    .homepage-slider .slide .banner-message.oui {
      top: 93%;
      left: 38.5%;
    }

    .homepage-slider .slide .banner-message.banner-message.makeup {
      top: 92.7%;
      left: 35%;
    }

    .homepage-slider .slide .banner-message .button {
      margin-top: 0;
    }

    .slice .cta-button {
      top: 94%;
      left: 38%;
    }
  }

  @media screen and (min-width:480px) {
    .global-slider.homepage-banner .homepage-slider .slick-dots {
      bottom: 1.7%;
    }

    .homepage-slider .slide .banner-message.oui {
      top: 93%;
      left: 38.5%;
    }

    .homepage-slider .slide .banner-message.banner-message.makeup {
      top: 92.7%;
      left: 35%;
    }

    .homepage-slider .slide .banner-message .button {
      margin-top: 0;
    }
  }

  /*mobile*/
  @media screen and (max-width:479px) {
    .global-slider.homepage-banner .homepage-slider .product-copy {
      text-align: center !important;
      margin-left: 0;
      padding: 0;
    }

    .global-slider.homepage-banner .homepage-slider .slick-dots {
      bottom: 0.7%;
    }

    .slide .banner-message.oui {
      top: 94%;
      left: 29.5%;
    }

    .homepage-slider .slide .banner-message.banner-message.makeup {
      top: 91.7%;
      left: 28.5%;
    }

    .homepage-slider .slide .banner-message .button {
      margin-top: 0;
    }

    .homepage-slider .slide .hide-sm-mobile {
      display: none;
    }

    .slice .cta-button {
      top: 95%;
      left: 30%;
    }

  }

  @media screen and (max-width:414px) {
    .slice .cta-button {
      top: 95%;
      left: 32%;
    }
  }

  @media screen and (max-width:320px) {
    .slice .cta-button {
      top: 95%;
      left: 26%;
    }
  }

<div class="homepage-slider">
  <div class="slide">
    <div class="container">
      <div class="slice oui-hero">
        <a href="$url('Search-Show','cgid','ouijuicycouture')$">
          <div class="cta-button">
            <div class="button">Shop Now</div>
          </div>
        </a>
        <a href="$url('Search-Show','cgid','ouijuicycouture')$">
          <picture>
            <source media="(max-width: 767px)" srcset="images/home-page/mobile/OUI_M_HPM_0000.jpg?$staticlink$, images/home-page/mobile/OUI_M_HPM_0000@2x.jpg?$staticlink$ 2x" />
            <source media="(min-width: 480px) and (max-width: 767px)" srcset="images/home-page/smart-phone/OUI_SP_HPM_0000.jpg?$staticlink$, images/home-page/smartphone/OUI_SP_HPM_0000@2x.jpg?$staticlink$ 2x" />
            <source media="(min-width: 768px) and (max-width: 1023px)" srcset="images/home-page/tablet/OUI_T_HPM_0000.jpg?$staticlink$, images/home-page/tablet/OUI_T_HPM_0000@2x.jpg?$staticlink$ 2x" />
            <img alt="The Power of OUI" src="images/home-page/desktop/OUI_D_HPM_0000.jpg?$staticlink$" srcset="images/home-page/desktop/OUI_D_HPM_0000.jpg?$staticlink$, images/home-page/desktop/OUI_D_HPM_0000@2x.jpg?$staticlink$ 2x" />
          </picture>
        </a>
      </div>
      <!--  slice END -->

      <div class="new-fragrance-banner">
        <picture>
          <source media=" (max-width: 767px)" srcset="images/home-page/mobile/statement1_mobile@2x.jpg?$staticlink$" />
          <source media="(min-width: 480px) and (max-width: 767px)" srcset="images/home-page/smart-phone/statement1_smartphone@2x.jpg?$staticlink$" />
          <source media="(min-width: 768px) and (max-width: 1023px)" srcset="images/home-page/tablet/statement1_tablet.jpg?$staticlink$, images/home-page/tablet/statement1_tablet@2x.jpg?$staticlink$ 2x" />
          <img alt="The New Fragrance Banner" class="" src="images/home-page/desktop/statement1_desktop.jpg?$staticlink$"
            srcset="images/home-page/desktop/statement1_desktop.jpg?$staticlink$, images/home-page/desktop/statement1_desktop@2x.jpg?$staticlink$ 2x" />
        </picture>
      </div>

      <div class="product-one-container">
        <a href="$url('Product-Show','pid','1503A0115198')$">
          <picture>
            <source media=" (max-width: 767px)" srcset="images/home-page/mobile/oui-gift-set-mobile.jpg?$staticlink$, images/home-page/mobile/oui-gift-set-mobile_2x.jpg?$staticlink$ 2x" />
            <source media="(min-width: 480px) and (max-width: 767px)" srcset="images/home-page/smart-phone/oui-gift-set-sp.jpg??$staticlink$, images/home-page/smart-phone/oui-gift-set-sp_2x.jpg?$staticlink$ 2x" />
            <source media="(min-width: 768px) and (max-width: 1023px)" srcset="images/home-page/tablet/oui-gift-set-tablet.jpg?$staticlink$, images/home-page/tablet/oui-gift-set-tablet_2x.jpg?$staticlink$ 2x" />
            <img id="oui-gift-set" alt="Juicy Couture The Power of Oui" src="images/home-page/desktop/oui-gift-set-desktop.jpg?$staticlink$"
              srcset="images/home-page/desktop/oui-gift-set-desktop.jpg?$staticlink$, images/home-page/desktop/oui-gift-set-desktop_2x.jpg?$staticlink$ 2x" />
          </picture>
        </a>
      </div>

      <div class="product-one-copy-container">
        <a href="$url('Search-Show','cgid','ouijuicycouture-fragrance')$">
          <div class="product-copy">
            <h2>OUI JUICY COUTURE</h2>

            <p>
              <span class="long-copy">The best things in life are OUI: love, adventure, perfume—and your festive
                spirit, statement-making fragrance.
              </span>
              <span class="short-copy">
                The best things in life are OUI: love, adventure, perfume—and your festive spirit.</span>
            </p>
            <div class="button">
              <a href="$url('Search-Show','cgid','ouijuicycouture-fragrance')$">SHOP NOW</a>
            </div>

          </div>
        </a>
      </div>
    </div>
  </div><!--  slide END -->
</div><!-- homepage-slider END -->

是否存在任何导致该布局中断的关键语法？