CSS:display:grid和/或-ms-grid

Question

有没有办法在两个display: grid/-ms-grid样式表中使用这两个样式表,或者我是否必须使用HTML hack或JavaScript来查询使用网格布局查看页面的浏览器类型？

例:

以下样式似乎不起作用

.container {
  display: grid -ms-grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(150px, 50px);
  grid-gap: 1vw;
  -ms-grid-columns: repeat(4, 1fr);
  -ms-grid-rows: repeat(150px, 50px);
  -ms-grid-gap: 1vw;
}

Answer 1

将新的CSS网格布局语法转换为过时的IE/Edge's真的是一个挑战.这不仅仅是添加一些供应商前缀的问题.

IE/Edge对新版CSS Grid Layout中的内容提供的支持非常有限.没有IE/Edge支持

• 自动放置并选择其流程(grid-auto-flowCSS属性);
• 重复的列/行(repeat函数和一些特殊值,如auto-fill和auto-fit).在某些情况下,这意味着您只需要使用显式值替换,就像在您的情况下,您可以替换grid-template-columns: repeat(4, 1fr)为-ms-grid-columns: 1fr 1fr 1fr 1fr,这将完美地工作.但是,如果你有类似的东西grid-template-columns: repeat(auto-fill, 1fr)在IE/Edge中实现它是不可能的;
• 网格单元间隙(grid-row-gap,grid-column-gap,grid-gapCSS属性).可以使用额外的网格轨道伪装间隙;
• 自动生成的轨道(grid-auto-columns,grid-auto-rowsCSS属性);
• 命名网格区域(grid-area,grid-template-areasCSS属性).

你只需要忘记IE的这种可能性.

此外,不支持某些受支持的IE属性值

自动布局

IE/Edge实现中没有自动放置行为.这意味着您必须定位所有内容,而不是使用网格的自动放置功能.

如果您没有放置项目,它们将堆叠在网格的第一个单元格中.这意味着您必须为每个网格项明确设置位置,否则它将驻留在第一个单元格中.如果您有这样的标记:

.wrapper {
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  -ms-grid-columns: 50px 50px;
  grid-template-columns: 50px 50px;
  -ms-grid-rows: 50px 50px;
  grid-template-rows: 50px 50px;
  background-color: #fff;
  color: #444;
}

.box {
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

你会在IE/Edge中看到这个

因此,在为IE/Edge开发CSS Grid时,基本上你有两个选项(方法)(如果你知道你的案例中的布局可以转换):

• 为IE/Edge浏览器和其他浏览器生成不同的标记.在这种情况下,你不关心标记的相似性(顺便说一下你的值grid-template-rows: repeat(150px, 50px)是无效的,所以我假设你想要grid-template-rows: 150px 50px).演示适合你的情况

  .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 150px 50px;
    grid-gap: 1vw;
    
    display: -ms-grid;
    /* also faking 1vw grid-gap */
    -ms-grid-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
    /* also faking 1vw grid-gap */
    -ms-grid-rows: 150px 1vw 50px;
  }
  
  .grid-item {
    /* style just for demo */
    background-color: yellow;
  }
  
  /* Explicit placement for IE */
  /* Omitting default value of -ms-grid-column: 1 and -ms-grid-row: 1 where possible */
  .grid-item:nth-child(2) {
    -ms-grid-column: 3;
  }
  
  .grid-item:nth-child(3) {
    -ms-grid-column: 5;
  }
  
  .grid-item:nth-child(4) {
    -ms-grid-column: 7;
  }
  
  .grid-item:nth-child(5) {
    -ms-grid-row: 3;
  }
  
  .grid-item:nth-child(6) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  
  .grid-item:nth-child(7) {
    -ms-grid-row: 3;
    -ms-grid-column: 5;
  }
  
  .grid-item:nth-child(8) {
    -ms-grid-row: 3;
    -ms-grid-column: 7;
  }

  <div class="container">
    <div class="grid-item">1,1</div>
    <div class="grid-item">1,2</div>
    <div class="grid-item">1,3</div>
    <div class="grid-item">1,4</div>
    <div class="grid-item">2,1</div>
    <div class="grid-item">2,2</div>
    <div class="grid-item">2,3</div>
    <div class="grid-item">2,4</div>
  </div>

• 为IE/Edge浏览器生成非常相似的标记.在这种情况下,所有浏览器的标记看起来都非常相似.这可能更容易维护,因为您不应该关心不同的方法.演示案例:

  .container {
    display: -ms-grid;
    display: grid;
    /* also faking 1vw grid-gap */
    -ms-grid-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
    grid-template-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
    /* also faking 1vw grid-gap */
    -ms-grid-rows: 150px 1vw 50px;
    grid-template-rows: 150px 1vw 50px;
  }
  
  .grid-item {
    /* style just for demo */
    background-color: yellow;
  }
  
  .grid-item:nth-child(2) {
    -ms-grid-column: 3;
    grid-column: 3;
  }
  
  .grid-item:nth-child(3) {
    -ms-grid-column: 5;
    grid-column: 5;
  }
  
  .grid-item:nth-child(4) {
    -ms-grid-column: 7;
    grid-column: 7;
  }
  
  .grid-item:nth-child(5) {
    -ms-grid-row: 3;
    grid-row: 3;
  }
  
  .grid-item:nth-child(6) {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 3;
    grid-column: 3;
  }
  
  .grid-item:nth-child(7) {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 5;
    grid-column: 5;
  }
  
  .grid-item:nth-child(8) {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 7;
    grid-column: 7;
  }

  <div class="container">
    <div class="grid-item">1,1</div>
    <div class="grid-item">1,2</div>
    <div class="grid-item">1,3</div>
    <div class="grid-item">1,4</div>
    <div class="grid-item">2,1</div>
    <div class="grid-item">2,2</div>
    <div class="grid-item">2,3</div>
    <div class="grid-item">2,4</div>
  </div>

Answer 2

您的display规则需要正确构建.你拥有的是无效的.

display: grid -ms-grid;

此外,您的grid-template-rows规则无效.第一个参数应该是一个指定重复次数的整数.

grid-template-rows: repeat(150px, 50px);

另外,我不相信旧规格中repeat()存在的符号.看起来它是在当前规范中引入的,因此IE不支持它.

-ms-grid-columns: repeat(4, 1fr);
-ms-grid-rows: repeat(150px, 50px);

最后,最好将官方(W3C)属性放在前缀版本之后,以便它们在级联中获得优先级(更多细节).

试试这个:

.container {
  display: -ms-grid; 
  display: grid;

  -ms-grid-columns: 1fr 1fr 1fr 1fr;           
  grid-template-columns: repeat(4, 1fr);

  -ms-grid-rows: 150px 50px;
  grid-template-rows: 150px 50px;

  -ms-grid-gap: 1vw;
  grid-gap: 1vw;
}

Answer 3

这是我在 IE 上使用的：

我为所有当前浏览器支持添加了 @supports()。如果您使用 @supports() 传递一个新的网格属性，例如 @supports(grid-area: auto) 以确保现代浏览器能够识别它。不要使用@supports(display: grid)，因为 IE 将识别 display:grid，然后使用它没有的现代网格属性。我不得不使用 1px 边距来模仿 IE 中的网格间隙

* {
    box-sizing: border-box;
}

.item-bg {
    background-color: rgb(92, 182, 205);
    border-radius: 6px;
    margin: 1px;
}

.container {
    display: -ms-grid;
    
   width: 800px;
    height: 600px;
    -ms-grid-columns: 200px 1fr 1fr;
    -ms-grid-rows: 80px 1fr 1fr 100px;
    
    
    
    }


.header {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1/4;

}
.sidebar {
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2/4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;

}
.content-1 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2/4;

}
.content-2 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3/4;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2/3;

}
.content-3 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3/4;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    grid-column: 3/4;
}
.footer {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    grid-row: 4/5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1/4;
}
@supports(grid-area: auto){
    .item-bg {
        background-color: indianred;
        border-radius: 6px;
        margin: 0;
    }
    
    .container {
        display: grid;
        width: 750px;
        height: 600px;
        grid-template-columns: 200px 1fr 1fr;
        grid-template-rows: 80px 1fr 1fr 100px;
        grid-gap: 2px;
        }
    .header {
        grid-row: 1/2;
        grid-column: 1/4;
    
    }
    .sidebar {
        grid-row: 2/4;
        grid-column: 1/2;
    
    }
    .content-1 {
        grid-row: 2/3;
        grid-column: 2/4;
    
    }
    .content-2 {
        grid-row: 3/4;
        grid-column: 2/3;
    
    }
    .content-3 {
        grid-row: 3/4;
        grid-column: 3/4;
    }
    .footer {
        grid-row: 4/5;
        grid-column: 1/4;
    }
}

html 是

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Basic Layout</title>
        <link rel="stylesheet" href="basiclayoutie.css" type="text/css">
    </head>
    <body>
        <div class="container">
            <div class="header item-bg">header</div>
            <div class="sidebar item-bg">sidebar</div>
            <div class="content-1 item-bg">Content-1</div>
            <div class="content-2 item-bg">Content-2</div>
            <div class="content-3 item-bg">Content-3</div>
            <div class="footer item-bg">Footer</div>
        </div>
    </body>
</html>