Почему диапазон строк сетки не принимается как "blank1" в IE 11

Question

Третий элемент сетки "blank1" должен охватывать строку и охватывать как строки 1, так и строки 2 столбца 3, но он не работает в IE 11. Он охватывает только первую строку.

Вот ссылка на файл онлайн. Посмотрите на это в Firefox, и он покажет, как он должен выглядеть. IE 11 нуждается в исправлении.

.wrapper {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 300px 300px 300px;
    grid-template-columns: 300px 300px 300px;
    -ms-grid-rows: 200px 200px 200px 200px;
    grid-template-rows: 200px 200px 200px 200px;
    background-color: #fff;
}
.wrapper > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}    
.wrapper > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}    
.wrapper > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}    
.wrapper > *:nth-child(4) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
}    
.wrapper > *:nth-child(5) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
}    
.wrapper > *:nth-child(6) {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
}    
.wrapper > *:nth-child(7) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}    
.wrapper > *:nth-child(8) {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
}    
.wrapper > *:nth-child(9) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
}    
.wrapper > *:nth-child(10) {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
}   
.wrapper > *:nth-child(11) {
    -ms-grid-row: 4;
    -ms-grid-column: 2;
}    
.wrapper > *:nth-child(12) {
    -ms-grid-row: 4;
    -ms-grid-column: 3;
}
.box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;
}
.print {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-column-span: 1;
    grid-column-end: 2;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-span: 1;
    grid-row-end: 2;
    background-color:white;
}
.ad {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-column-span: 1;
    grid-column-end: 3;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-span: 1;
    grid-row-end: 2;
    background-color:234;        
}
.blank1 {
    -ms-grid-column: 3;
    grid-column-start: 3;
    -ms-grid-column-span: 1;
    grid-column-end: 4;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-span: 2;
    grid-row-end: 3;
    background-color:678;        
}
.search {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-column-span: 1;
    grid-column-end: 2;
    -ms-grid-row: 2;
    grid-row-start: 2;
    -ms-grid-row-span: 1;
    grid-row-end: 3;
    background-color:white;        
}
.logo {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-column-span: 1;
    grid-column-end: 3;
    -ms-grid-row: 2;
    grid-row-start: 2;
    -ms-grid-row-span: 1;
    grid-row-end: 3;
    background-color:678;        
}
.menu {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-column-span: 1;
    grid-column-end: 2;
    -ms-grid-row: 3;
    grid-row-start: 3;
    -ms-grid-row-span: 1;
    grid-row-end: 4;
    background-color:789;        
}
.content {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-column-span: 1;
    grid-column-end: 3;
    -ms-grid-row: 3;
    grid-row-start: 3;
    -ms-grid-row-span: 1;
    grid-row-end: 4;
    background-color:567;
}
.rightside {
    -ms-grid-column: 3;
    grid-column-start: 3;
    -ms-grid-column-span: 1;
    grid-column-end: 4;
    -ms-grid-row: 3;
    grid-row-start: 3;
    -ms-grid-row-span: 2;
    grid-row-end: 5;
    background-color:orange;
}
.blank2 {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-column-span: 1;
    grid-column-end: 2;
    -ms-grid-row: 4;
    grid-row-start: 4;
    -ms-grid-row-span: 1;
    grid-row-end: 5;
    background-color:red;
}
.footer {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-column-span: 1;
    grid-column-end: 3;
    -ms-grid-row: 4;
    grid-row-start: 4;
    -ms-grid-row-span: 1;
    grid-row-end: 5;
    background-color:289;
}

<div class="wrapper">
    <div class="box print">print</div>
    <div class="box ad">ad</div>
    <div class="box blank1">blank1</div>
    <div class="box search">search</div>
    <div class="box logo">logo</div>
    <div class="box menu">menu</div>
    <div class="box content">content</div>
    <div class="box rightside">right side</div>
    <div class="box blank2">blank2</div>
    <div class="box footer">footer</div>
</div>

https://www.survival -manual.com / тест / тест-ie.php

Answer 1

Я исправил проблему с обходным путем. На самом деле не решает, почему оригинальный код не работал, но выполняет то, что я пытался сделать.

Я просто добавил еще один div. Вместо того, чтобы пытаться охватить два ряда одним делением. Я просто сделал еще один div, чтобы идти ниже первого.

Разъяснение. Я добавил разметку CSS-сетки, чтобы поместить ее в столбец 3, строку 2. Там, где должен был находиться другой элемент div.

<div class="wrapper">
<div class="box print"><?php include($_SERVER["DOCUMENT_ROOT"] . "/php-includes/grid-print.php"); ?></div>
<div class="box ad">ad</div>
<div class="box blank1">blank1</div>
<div class="box search"><?php include($_SERVER["DOCUMENT_ROOT"] . "/php-includes/grid-search.php"); ?></div>
<div class="box logo">logo</div>
<div class="box blank2">blank2</div>
<div class="box menu">menu</div>
<div class="box content">content</div>
<div class="box rightside">right side</div>
<div class="box blank3">blank3</div>
<div class="box footer">footer</div>
</div>

Answer 2

Я думаю, что ваши n-ые дочерние селекторы, где вы указываете свои префиксные свойства -ms-grid, не соответствуют вашим селекторам классов. Можете ли вы попробовать этот код ниже?

    body {
        margin: 0px;
    }


    .wrapper {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 300px 300px 300px;
        grid-template-columns: 300px 300px 300px;
        -ms-grid-rows: 200px 200px 200px 200px;
        grid-template-rows: 200px 200px 200px 200px;
        background-color: #fff;

    }

    .wrapper>*:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;

    }

    .wrapper>*:nth-child(2) {
        -ms-grid-row: 2;
        -ms-grid-column: 2;

    }

    .wrapper>*:nth-child(3) {
        -ms-grid-row: 1;
        -ms-grid-column: 3;

    }

    .wrapper>*:nth-child(4) {
        -ms-grid-row: 2;
        -ms-grid-column: 1;

    }

    .wrapper>*:nth-child(5) {
        -ms-grid-row: 2;
        -ms-grid-column: 2;

    }

    .wrapper>*:nth-child(6) {
        -ms-grid-row: 3;
        -ms-grid-column: 1;

    }

    .wrapper>*:nth-child(7) {
        -ms-grid-row: 3;
        -ms-grid-column: 2;

    }

    .wrapper>*:nth-child(8) {
        -ms-grid-row: 3;
        -ms-grid-column: 3;

    }

    .wrapper>*:nth-child(9) {
        -ms-grid-row: 4;
        -ms-grid-column: 1;

    }

    .wrapper>*:nth-child(10) {
        -ms-grid-row: 4;
        -ms-grid-column: 2;

    }

    .wrapper>*:nth-child(11) {
        -ms-grid-row: 4;
        -ms-grid-column: 2;

    }

    .wrapper>*:nth-child(12) {
        -ms-grid-row: 4;
        -ms-grid-column: 3;

    }

    .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;

    }

    .print {
        -ms-grid-column: 1;
        grid-column-start: 1;
        -ms-grid-column-span: 1;
        grid-column-end: 2;
        -ms-grid-row: 1;
        grid-row-start: 1;
        -ms-grid-row-span: 1;
        grid-row-end: 2;
        background-color: white;

    }

    .ad {
        -ms-grid-column: 2;
        grid-column-start: 2;
        -ms-grid-column-span: 1;
        grid-column-end: 3;
        -ms-grid-row: 1;
        grid-row-start: 1;
        -ms-grid-row-span: 1;
        grid-row-end: 2;
        background-color: 234;
    }

    .blank1 {
        -ms-grid-column: 3;
        grid-column-start: 3;
        -ms-grid-column-span: 1;
        grid-column-end: 4;
        -ms-grid-row: 1;
        grid-row-start: 1;
        -ms-grid-row-span: 2;
        grid-row-end: 3;
        background-color: 678;
    }

    .search {
        -ms-grid-column: 1;
        grid-column-start: 1;
        -ms-grid-column-span: 1;
        grid-column-end: 2;
        -ms-grid-row: 2;
        grid-row-start: 2;
        -ms-grid-row-span: 1;
        grid-row-end: 3;
        background-color: white;
    }

    .logo {
        -ms-grid-column: 2;
        grid-column-start: 2;
        -ms-grid-column-span: 1;
        grid-column-end: 3;
        -ms-grid-row: 2;
        grid-row-start: 2;
        -ms-grid-row-span: 1;
        grid-row-end: 3;
        background-color: 678;
    }

    .menu {
        -ms-grid-column: 1;
        grid-column-start: 1;
        -ms-grid-column-span: 1;
        grid-column-end: 2;
        -ms-grid-row: 3;
        grid-row-start: 3;
        -ms-grid-row-span: 1;
        grid-row-end: 4;
        background-color: 789;
    }

    .content {
        -ms-grid-column: 2;
        grid-column-start: 2;
        -ms-grid-column-span: 1;
        grid-column-end: 3;
        -ms-grid-row: 3;
        grid-row-start: 3;
        -ms-grid-row-span: 1;
        grid-row-end: 4;
        background-color: 567;

    }

    .rightside {
        -ms-grid-column: 3;
        grid-column-start: 3;
        -ms-grid-column-span: 1;
        grid-column-end: 4;
        -ms-grid-row: 3;
        grid-row-start: 3;
        -ms-grid-row-span: 2;
        grid-row-end: 5;
        background-color: orange;
    }

    .blank2 {
        -ms-grid-column: 1;
        grid-column-start: 1;
        -ms-grid-column-span: 1;
        grid-column-end: 2;
        -ms-grid-row: 4;
        grid-row-start: 4;
        -ms-grid-row-span: 1;
        grid-row-end: 5;
        background-color: red;

    }

    .footer {
        -ms-grid-column: 2;
        grid-column-start: 2;
        -ms-grid-column-span: 1;
        grid-column-end: 3;
        -ms-grid-row: 4;
        grid-row-start: 4;
        -ms-grid-row-span: 1;
        grid-row-end: 5;
        background-color: 289;

    }