css - 如何为 17 以上的 Microsoft Edge 版本修复 css 网格，即使有前缀也仍然不起作用

Question

Css-grid 在 edge 上不工作，但在 firefox、chrome、safari 上......完美工作

我试过给代码加上前缀:这是https://codepen.io/karolis-rusevicius/pen/aPxqbY

也许我没有定义什么？或者只是 Edge 不支持我使用的东西之一。我知道可以用卑鄙的方式定义网格。我厌倦了微软

<main id="wrapper"><div class="element1 grid-box">1</div>
<div class="element2 grid-box">2</div>
<div class="element3 grid-box">3</div>
<div class="element7 grid-box">7</div>
<div class="element8 grid-box">8</div>
<div class="element9 grid-box">9</div>
<div class="element10 grid-box">10</div>
</main>
@media only screen and (min-width: 1000px) {
#wrapper {
  width: 90vw;
  height: 90vh;
  margin: auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 25% 1rem 25% 1rem 25% 1rem 25% 1rem 59% 1rem 80%;
  grid-template-rows: 25% 25% 25% 25% 59% 80%;
  -ms-grid-columns: 25% 1rem 25% 1rem 25% 1rem 25%;
  grid-template-columns: 25% 25% 25% 25%;
  grid-gap: 1rem;
      grid-template-areas:
    "box1 box2 box2 box3"
    "box1 box2 box2 box3"
    "box1 box2 box2 box7"
    "box1 box2 box2 box7"
    "box8 box8 box9 box9"
    "box10 box10 box10 box10"
    ;
    }
    }


#wrapper .element1 {
background-size: 390px;
background-color: #493C87;
grid-area: box1;
}
#wrapper .element2 {
background-size: 390px;
background-color: #493C87;
grid-area: box2;
}
#wrapper .element3 {
background-size: 390px;
background-color: #493C87;
grid-area: box3;
}
#wrapper .element4 {
background-size: 390px;
background-color: #493C87;
grid-area: box7;
}
#wrapper .element7 {
background-size: 390px;
background-color: #493C87;
grid-area: box7;
}
#wrapper .element8 {
background-size: 390px;
background-color: #493C87;
grid-area: box8;
}
#wrapper .element9 {
background-size: 390px;
background-color: #493C87;
grid-area: box9;
}
#wrapper .element10 {
background-size: 390px;
background-color: #493C87;
grid-area: box10;
}

很想了解我在边缘计算上缺少什么

Answer 1

不再有问题，只需添加 9 个 anchor 而不是 div 并在 css 中添加一个 {display:content} 并且它适用于任何浏览器