Как исправить сетку CSS для Microsoft край версии выше 17, по-прежнему не работает даже с префиксом - PullRequest
Новая
       9

Как исправить сетку CSS для Microsoft край версии выше 17, по-прежнему не работает даже с префиксом

0 голосов
/ 16 января 2019

Css-grid не работает на краю, но на Firefox, Chrome, Safari .... отлично работает

Я попробовал префикс кода: вот он https://codepen.io/karolis-rusevicius/pen/aPxqbY

Мэйби, я что-то не определяю? Или это просто Edge не поддерживает одну из вещей, которые я использую. Я понимаю, что сетка может быть определена разными способами. Я устал от Microsoft 

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

хотел бы понять, чего мне не хватает, чтобы работать на грани

1 Ответ

0 голосов
/ 21 января 2019

Больше нет проблем, просто добавили 9 якорей вместо div и добавили в css a {display: content}, и это работает для любого браузера

...