Html “为什么不接受网格行跨度？”；空白1“；在IE 11中

第三个网格项“blank1”应跨行并覆盖第3列的第1行和第2行，但在IE 11中不起作用。它只包括第一排

这里是一个链接到文件在线。在Firefox中查看它，它将显示它的外观。IE 11需要修理

.wrapper{
显示：-ms网格；
显示：网格；
-ms网格列：300px 300px 300px；
网格模板列：300px 300px 300px；
-ms网格行：200px 200px 200px 200px；
网格模板行：200px 200px 200px 200px；
背景色：#fff；
}
.wrapper>*：第n个子项（1）{
-ms网格行：1；
-ms网格列：1；
}    
.wrapper>*：第n个子项（2）{
-ms网格行：1；
-ms网格列：2；
}    
.wrapper>*：第n个子项（3）{
-ms网格行：1；
-ms网格列：3；
}    
.wrapper>*：第n个子项（4）{
-ms网格行：2；
-ms网格列：1；
}    
.wrapper>*：第n个子项（5）{
-ms网格行：2；
-ms网格列：2；
}    
.wrapper>*：第n个子项（6）{
-ms网格行：2；
-ms网格列：3；
}    
.wrapper>*：第n个子项（7）{
-ms网格行：3；
-ms网格列：1；
}    
.wrapper>*：第n个子项（8）{
-ms网格行：3；
-ms网格列：2；
}    
.wrapper>*：第n个子项（9）{
-ms网格行：3；
-ms网格列：3；
}    
.wrapper>*：第n个子项（10）{
-ms网格行：4；
-ms网格列：1；
}   
.wrapper>*：第n个子项（11）{
-ms网格行：4；
-ms网格列：2；
}    
.wrapper>*：第n个子项（12）{
-ms网格行：4；
-ms网格列：3；
}
.盒子{
背景色：#444；
颜色：#fff；
边界半径：5px；
填充：20px；
字体大小：150%；
}
.打印{
-ms网格列：1；
网格列开始：1；
-ms格构柱跨度：1；
网格柱端：2；
-ms网格行：1；
网格行开始：1；
-ms网格行跨度：1；
网格行端：2；
背景色：白色；
}
.广告{
-ms网格列：2；
网格列开始：2；
-ms格构柱跨度：1；
网格柱端：3；
-ms网格行：1；
网格行开始：1；
-ms网格行跨度：1；
网格行端：2；
背景色：234；
}
.空白1{
-ms网格列：3；
网格列开始：3；
-ms格构柱跨度：1；
网格柱端：4；
-ms网格行：1；
网格行开始：1；
-ms网格行跨度：2；
网格行端：3；
背景色：678；
}
.搜索{
-ms网格列：1；
网格列开始：1；
-ms格构柱跨度：1；
网格柱端：2；
-ms网格行：2；
网格行开始：2；
-ms网格行跨度：1；
网格行端：3；
背景色：白色；
}
.标志{
-ms网格列：2；
网格列开始：2；
-ms格构柱跨度：1；
网格柱端：3；
-ms网格行：2；
网格行开始：2；
-ms网格行跨度：1；
网格行端：3；
背景色：678；
}
.菜单{
-ms网格列：1；
网格列开始：1；
-ms格构柱跨度：1；
网格柱端：2；
-ms网格行：3；
网格行开始：3；
-ms网格行跨度：1；
网格行端：4；
背景色：789；
}
.内容{
-ms网格列：2；
网格列开始：2；
-ms格构柱跨度：1；
网格柱端：3；
-ms网格行：3；
网格行开始：3；
-ms网格行跨度：1；
网格行端：4；
背景色：567；
}
.右侧{
-ms网格列：3；
网格列开始：3；
-ms格构柱跨度：1；
网格柱端：4；
-ms网格行：3；
网格行开始：3；
-ms网格行跨度：2；
网格行端：5；
背景颜色：橙色；
}
.空白2{
-ms网格列：1；
网格列开始：1；
-ms格构柱跨度：1；
网格柱端：2；
-ms网格行：4；
网格行开始：4；
-ms网格行跨度：1；
网格行端：5；
背景色：红色；
}
.页脚{
-ms网格列：2；
网格列开始：2；
-ms格构柱跨度：1；
网格柱端：3；
-ms网格行：4；
网格行开始：4；
-ms网格行跨度：1；
网格行端：5；
背景色：289；
}

打印
公元
空白1
搜索
标志
菜单
内容
右侧
空白2
页脚

我认为您的第n个子选择器（在其中指定-ms网格前缀属性）与类选择器不一致。你能试试下面的代码吗

    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;

    }

---

我通过一个变通办法解决了这个问题。这并不能真正解决为什么原始代码不起作用，但却完成了我试图做的事情

我简单地添加了另一个div。而不是试图用一个div跨越两行。我简单地创建了另一个div，使其位于第一个div的下方

澄清。我添加了css网格标记，将其放在第3列第2行。在那里，另一个小分队应该跨过它

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

公元
空白1
标志
空白2
菜单
内容
右侧
空白3
页脚

我在粗略的审查中没有发现任何问题。你在这里查过了吗：我看了那篇文章。它说IE不支持span。我使用的代码有ms前缀，由自动生成的代码应用程序插入到代码中。我不会想到它会为ie生成不被ie接受的代码？？？去看看横排的工作对ie来说应该是什么。我不明白！这就是我在ie 11中发现跨越两行的方法-ms网格行跨度：2；这就是我的代码，但它不起作用。页面左上角的所有内容都乱七八糟。很抱歉听到这个消息。为了确定，您是否只替换了CSS代码中的第n个子部分？我用完整的CSS更新了我的答案。你现在能试试吗？是的，我复制并粘贴了你提供的代码。谢谢看起来当我这么做的时候，每个元素都是叠在一起的，就像每个网格框都是第一个一样。