IE中Css Grid中的項目互相疊加

Question

IE 11中Css Grid中的項目相互疊加。一切都在Chrome，FF和Safari瀏覽器工作正常，但不是IE 11

鉻：

IE：

代碼：

.content-item__image { 
 
    height: 210px; 
 
    width: 100%; 
 
    background-size: cover; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.content-item__description { 
 
    padding: 16px 28px; 
 
} 
 

 
.content-grid { 
 
    display: grid; 
 
    display: -ms-grid; 
 
    grid-template-columns: 1fr 1fr 1fr; 
 
    -ms-grid-columns: 1fr 1fr 1fr; 
 
    grid-template-rows: 1fr 1fr; 
 
    -ms-grid-rows: 1fr 1fr; 
 
    grid-gap: 1rem; 
 
}

<div class="content-grid"> 
 
    <div class="content-item"> 
 
    <div class="content-item__backdrop"></div> 
 
    <div class="content-item__image"></div> 
 
    <div class="content-item__description">Cos’è il Texas holdem</div> 
 
    </div> 
 
    <div class="content-item"> 
 
    <div class="content-item__backdrop"></div> 
 
    <div class="content-item__image"></div> 
 
    <div class="content-item__description">Cos’è il Texas holdem</div> 
 
    </div> 
 
    <div class="content-item"> 
 
    <div class="content-item__backdrop"></div> 
 
    <div class="content-item__image"></div> 
 
    <div class="content-item__description">Cos’è il Texas holdem</div> 
 
    </div> 
 
    <div class="content-item"> 
 
    <div class="content-item__backdrop"></div> 
 
    <div class="content-item__image"></div> 
 
    <div class="content-item__description">Cos’è il Texas holdem</div> 
 
    </div> 
 
    <div class="content-item"> 
 
    <div class="content-item__backdrop"></div> 
 
    <div class="content-item__image"></div> 
 
    <div class="content-item__description">Cos’è il Texas holdem</div> 
 
    </div> 
 
    <div class="content-item"> 
 
    <div class="content-item__backdrop"></div> 
 
    <div class="content-item__image"></div> 
 
    <div class="content-item__description">Cos’è il Texas holdem</div> 
 
    </div> 
 
</div>

可能是什麼問題和w ays來解決它？ 將不勝感激任何幫助。

Answer 1

首先。壞消息是 - 它發生在Edge。所以這對IE和Edge瀏覽器來說是一個問題，因爲Edge現在看起來已經非常現代化了。根據微軟documentation它應該工作正常...但它不。已經嘗試了一些-ms前綴修補程序，但它仍然損壞，看起來非常糟糕。看起來css grid在這些瀏覽器上沒有很好的實現。讓我們考慮一下如何解決這個問題，這樣頁面對於IE/Edge用戶來說看起來就OK了。

---

基本問題說明

的項目疊加在彼此因爲在IE和邊緣柵格項總是堆積在第一小區。

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

.content-item:nth-child(3) { 
    -ms-grid-column: 3; 
} 

等等... 問題是，當內容是動態的，你不知道有多少項目：如果你確切地知道一些項目，您可以在使用CSS網格屬性的一個固定伊斯利將出現在網格父元素中。在HTML

---

條件註釋我曾經使用條件註釋擔任特殊的CSS文件僅適用於IE瀏覽器。

<!--[if IE ]> 
    <link href="iecss.css" rel="stylesheet" type="text/css"> 
<![endif]--> 

但它不會幫助你了。 HTML中的條件語句不支持通過Internet Explorer或自IE10以來的Edge。太糟糕了，這個解決方案將只涵蓋IE9及以下版本。

---

工作解決方案！ （僅限CSS）

解決Microsoft瀏覽器問題的方法之一是使用@supports或@media查詢來捕獲正確的瀏覽器。

要獲得唯一IE使用

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 
    Grid fixes for IE goes here... 
} 

只獲取邊緣瀏覽器，使用

@supports (-ms-ime-align: auto) { 
    Grid fixes for Edge goes here... 
} 

更多@supports指令 - here。不幸的是，你不能使用@supports來捕捉IE，因爲它不支持它 - caniuse。 我們選擇Edge by -ms-ime-align屬性，因爲此屬性僅由Edge支持，因此可以安全地使用它。

---

希望它有幫助。 這裏是工作DEMO。