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

时间：2017-07-16 01:51:44

标签： css css3 internet-explorer grid-layout css-grid

有没有办法在一个样式表中同时使用这两个或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;
}

4 个答案:

答案 0 :(得分：24)

将新的CSS网格布局语法转换为过时的IE是一项挑战。这不仅仅是添加一些供应商前缀的问题。

IE对新版CSS Grid Layout中的内容提供的支持非常有限。

没有IE支持
  • 自动放置并选择其流程（grid-auto-flow CSS属性）;
  • 重复列/行（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中实现这一点;
  • 网格单元格间隔（grid-row-gap，grid-column-gap，grid-gap CSS属性）。可以使用额外的网格轨道伪装间隙;
  • 自动生成曲目（grid-auto-columns，grid-auto-rows CSS属性）;
  • 命名网格区域（grid-area，grid-template-areas CSS属性）。

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

也不支持某些受支持的IE属性值

自动布局

IE实施中没有自动放置行为。这意味着您必须定位所有内容，而不是使用网格的自动放置功能。<​​/ p>

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

.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中看到这个东西

IE grid demo

所以基本上你在为IE开发CSS Grid时有两个选项（方法）（如果你知道你的案例中的布局可以转换）：

  • 为IE浏览器和其他浏览器生成不同的标记。在这种情况下，您不关心标记的相似性（顺便说一下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浏览器生成非常相似的标记。在这种情况下，所有浏览器的标记看起来都非常相似。这可能更容易维护，因为您不应该关心不同的方法。为您的案例演示：

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

答案 1 :(得分：7)

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

display: grid -ms-grid;

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

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

另外，我不相信older specs中存在repeat()符号。看起来它是current spec引入的，所以IE不支持它。

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

最后，最好将官方（W3C）属性放在前缀版本之后，以便它们在级联（more details）中获得优先权。

试试这个：

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

答案 2 :(得分：0)

Vadim 的回答几乎就是你应该做的。但是你可以使用一些CSS技巧来缓解你的痛苦。

<强> 0 即可。请务必阅读此博客文章，以确定是否要将网格用于支持IE的网站：https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/

如果您对上一个问题的回答为“是”，请继续阅读：

  1. 使用autoprefixer。它将一些CSS网格属性替换为它们的IE等价物。但考虑到网格属性的复杂程度（重复，minmax，跨度等），autoprefixer无法覆盖所有情况。

  2. 如果您想编写符合规范的CSS，但仍然支持IE的情况是@supports() at-rule，那么这是一个非常值得信赖的伴侣。我用它来使用更高级的网格属性，例如grid-gaps等：

    .card-list {
  grid-row: 4;
  grid-column: 1 / 3;
  padding: 1.5vh 1vh;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}
.card {
  margin-bottom: 1vh;
}
.card:nth-of-type(odd) {  /* takes care of IE */
  margin-right: 1vh;
  grid-column: 1;
}
.card:nth-of-type(even) {
  grid-column: 2;
}

@supports(grid-gap: 1vh) { /* still using standard code! */
  .card-list {
    grid-gap: 1vh;
  }
  .card {
    margin-right: 0;
    margin-bottom: 0;
  }
}

答案 3 :(得分：0)

这是我用于IE的内容：

我为所有当前的浏览器支持添加了@supports（）。如果使用@supports（），请传入一个新的网格属性，例如@supports（grid-area：auto），以确保现代浏览器能够将其选中。不要使用@suppports（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>
相关问题
最新问题