Question

我遵循列出here的IE 10+ CSS Grid供应商前缀规范，但CSS网格在IE 11中没有正常工作。它也不适用于Edge。不过，谷歌Chrome和Firefox上的一切都很好。这是我的codepen。我尝试将vmin和fr单位更改为px，但问题仍然存在。谁能告诉我我做错了什么？这是我第一次玩Grid，也许这只是一个我没有看到的简单修复。提前致谢

＆＃13;

/*

  1fr = 167px(width of uppermost leftmost white rectangle of painting)
  1vmin = .01 * 726px(height of entire painting)

*/

/* General Styles */
* {box-sizing: border-box;}

body {
  background: #000;
  font-size: 1rem;
  margin: 0;
  padding: 0;
}

.grid {
  display: -ms-grid;
  display: grid;
}

/* Margins */
.margin-right {
  margin-right: 2.6vmin;
}

.margin-bottom {
  margin-bottom: 2.6vmin;
}

/* Colors */
.white {
  background: #fff;
}

.yellow {
  background: #ffcf00;
}

.red {
  background: #df0000;
}

.blue {
  background: #2822dd;
}

.black {
  background: #000;
}

/* Grid Container */
.grid-container {

}

/* Grid One */
.grid-one {
  -ms-grid-columns: 1fr 1.72fr .50fr .38fr .28fr;
  -ms-grid-rows: 9.50vmin;
  grid-template-columns: 1fr 1.72fr .50fr .38fr .28fr;
  grid-template-rows: 9.50vmin;
}

/* Grid Two */
.grid-two {
  -ms-grid-columns: .51fr 2.22fr .50fr .38fr .28fr;
  -ms-grid-rows: 29vmin;
  grid-template-columns: .51fr 2.22fr .50fr .38fr .28fr;
  grid-template-rows: 29vmin;
}

/* Grid Three */
.grid-three {
  -ms-grid-columns: .51fr 2.22fr .50fr .38fr .28fr;
  -ms-grid-rows: 19vmin;
  grid-template-columns: .51fr 2.22fr .50fr .38fr .28fr;
  grid-template-rows: 19vmin;
}

/* Grid Four */
.grid-four {
  -ms-grid-columns: .51fr 1.11fr 1.11fr .88fr .28fr;
  -ms-grid-rows: 10.06vmin;
  grid-template-columns: .51fr 1.11fr 1.11fr .88fr .28fr;
  grid-template-rows: 10.06vmin;
}

/* Grid Five */
.grid-five {
  -ms-grid-columns: .51fr 1.11fr 1.11fr .88fr .28fr;
  -ms-grid-rows: 10.06vmin;
  grid-template-columns: .51fr 1.11fr 1.11fr .88fr .28fr;
  grid-template-rows: 10.06vmin;
}

/* Grid Six */
.grid-six {
  -ms-grid-columns: .51fr 1.11fr 1.11fr .88fr .28fr;
  -ms-grid-rows: 6.34vmin;
  grid-template-columns: .51fr 1.11fr 1.11fr .88fr .28fr;
  grid-template-rows: 6.34vmin;
}

/* Grid Seven */
.grid-seven {
  -ms-grid-columns: .51fr 1.11fr 1.11fr .88fr .28fr;
  -ms-grid-rows: 2.89vmin;
  grid-template-columns: .51fr 1.11fr 1.11fr .88fr .28fr;
  grid-template-rows: 2.89vmin;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mondrian</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../css/styles.css">
</head>
<body>


<div class="grid grid-one">
  <div class="white margin-right margin-bottom"></div>
  <div class="white margin-right margin-bottom"></div>
  <div class="yellow margin-bottom"></div>
  <div class="yellow margin-right margin-bottom"></div>
  <div class="white"></div>
</div>

<div class="grid grid-two">
  <div class="white margin-right"></div>
  <div class="red margin-right"></div>
  <div class="yellow margin-bottom"></div>
  <div class="yellow margin-right margin-bottom"></div>
  <div class="white"></div>
</div>

<div class="grid grid-three">
  <div class="white margin-right"></div>
  <div class="red margin-right margin-bottom"></div>
  <div class="white margin-right margin-bottom"></div>
  <div class="white margin-right margin-bottom"></div>
  <div class="white"></div>
</div>

<div class="grid grid-four">
  <div class="white margin-right margin-bottom"></div>
  <div class="black margin-right margin-bottom"></div>
  <div class="white margin-right margin-bottom"></div>
  <div class="white margin-right margin-bottom"></div>
  <div class="white margin-bottom"></div>
</div>

<div class="grid grid-five">
  <div class="yellow margin-right"></div>
  <div class="white margin-right margin-bottom"></div>
  <div class="white margin-right margin-bottom"></div>
  <div class="blue margin-right"></div>
  <div class="red"></div>
</div>

<div class="grid grid-six">
  <div class="yellow margin-right"></div>
  <div class="white margin-right"></div>
  <div class="black margin-right margin-bottom"></div>
  <div class="blue margin-right margin-bottom"></div>
  <div class="red"></div>
</div>

<div class="grid grid-seven">
  <div class="yellow margin-right"></div>
  <div class="white margin-right"></div>
  <div class="white"></div>
  <div class="white margin-right"></div>
  <div class="red"></div>
</div>

</body>
</html>

＆＃13;

Answer 1

感谢Lister先生，我了解到目前来自IE10的实施已经过时了......这意味着目前无法在IE上正确看到网格。刚刚看了@jensimmons的推文，说明CSS Grid将于10月17日进入MS Edge。

CSS Grid供应商前缀不适用于Internet Explorer

1 个答案: