为什么 IE 11 中的“blank1”不接受网格行跨度答案

【问题标题】：Why is grid row span not being accepted for "blank1" in IE 11为什么 IE 11 中的“blank1”不接受网格行跨度
【发布时间】：2019-04-22 16:13:57
【问题描述】：

第三个网格项“blank1”应该跨行并覆盖第 3 列的第 1 行和第 2 行，但它在 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/test/test-ie.php

【问题讨论】：

我在粗略的审查中没有发现任何问题。你检查过这里吗：stackoverflow.com/q/45786788/3597276
我看了那个帖子。它说 IE 不支持跨度。我正在使用的代码具有 ms 前缀，并且由自动生成的代码应用程序插入到代码中。我不会想到它会为 ie 生成不被 ie 接受的代码？？？去看看行跨度的解决方法是什么。
我不明白！这就是我发现在 11 中跨越两行的方式。-ms-grid-row-span: 2;这就是我在代码中的内容，但它不起作用。

标签： html css internet-explorer css-grid

【解决方案1】：

我通过变通解决了这个问题。并没有真正解决为什么原始代码不起作用，但完成了我想要做的事情。

我简单地添加了另一个 div。而不是试图用一个 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>

【讨论】：

【解决方案2】：

我认为您指定 -ms-grid 前缀属性的第 n 个子选择器与您的类选择器不符。你可以试试下面这段代码吗？

    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;

    }

【讨论】：

没有用。页面左上角的一切都乱七八糟。
很抱歉听到这个消息。只是为了确定一下，您是否只替换了 CSS 代码中的第 n 个子部分？
我用完整的 CSS 更新了我的答案。现在可以试试了吗？
是的，我复制并粘贴了您提供的代码。谢谢。看起来，当我这样做时，每个元素都堆叠在一起，就好像每个网格框都是第一个一样。