Question

Css-grid在边缘上不起作用，但是在Firefox，chrome，safari ...上工作正常

我尝试在代码前加上前缀：这里是https://codepen.io/karolis-rusevicius/pen/aPxqbY

Maby我没有定义什么吗？或者只是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个锚点而不是div，然后在CSS中添加一个{display：content}即可，它适用于任何浏览器

如何为17以上的Microsoft Edge版本修复CSS网格即使使用前缀也无法正常工作

1 个答案: