相关疑难解决方法(0)

有人告诉我如何让这个例子在ie11中运行？我检查了文档和-ms-前缀没有帮助

#page {
  display: -ms-grid;
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head" "nav  main" "nav  foot";
  -ms-grid-rows: 50px 1fr 30px;
      grid-template-rows: 50px 1fr 30px;
  -ms-grid-columns: 150px 1fr;
      grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

示例:https://jsfiddle.net/9bp1ffs1/

使用IE 11和EDGE支持的旧CSS网格规范时。网格项目是否可以像当前规范一样自动放置？

即不必在网格项目上定义列：

.item:nth-child(1) {
    -ms-grid-column: 1;
}
.item:nth-child(2) {
    -ms-grid-column: 2;
}
.item:nth-child(n) {
    -ms-grid-column: n;
}

https://codepen.io/JoeHastings/pen/mMPoqB

我正在尝试使以下示例在 IE 11 中工作：https : //dojo.telerik.com/ariSElEj

在普通浏览器中看起来像这样：

我的CSS：

.wrapper {
    display: grid;
    grid-template-rows: repeat(6, 100px);
    grid-auto-flow: column;
    grid-auto-columns: 33.3333%;
}
* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}

IE 11 只是忽略 CSS 并显示 1 列。

有没有办法在 IE 中使用这种布局，而对 CSS 的改动很小？或者，有没有人像这个例子那样建议“浏览器特定的 HTML” - >如何显示浏览器特定的 HTML？

我一直在关注导向这里对IE 11的工作越来越电网我的问题是,即使下面的这些规则,列和行只是相互重叠而不是把自己的发车位置.

这是一个简单的代码示例,会导致问题:

HTML

<div class="grid">
  <div>Top Left</div>
  <div>Top Right</div>
  <div>Bottom Left</div>
  <div>Bottom Right</div>
</div>

CSS

.grid {
  display: -ms-grid;
  -ms-grid-columns: 200px 200px;
  -ms-grid-rows: 200px 200px;
}

这是一个代码链接到它:

https://codepen.io/anon/pen/pdNWMj

我是否错误地使用了此代码,或者我应该使用除网格的ms实现之外的其他内容？

I have the following simple layout example using CSS grid

.container {
	width: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr auto 1fr;
    grid-template-columns: 1fr auto 1fr;
}

.item1 {
	text-align:center;
    background:red;
	color:white;
	padding:20px
}

.item2 {
	text-align:center;
	background:green;
	color:white;
	padding:20px
}

.item3 {
	text-align:center;
	background:blue;
	color:white;
	padding:20px
}

<div class="container">

	<div class="item1">
		Item 1 
	</div>

	<div class="item2">
		Item 2
	</div>

	<div class="item3">
		Item 3
	</div>

</div>

I have prefixed with ie specific prefixes but the grid is not working correctly …