IE上のCssグリッド内のアイテムが互いに重ね合わされている

Question

IE 11のCSSグリッド内のアイテムが互いに重なり合っています。すべてがクロム、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

まずは、悪いニュースです - それはエッジで起こるあまりにも。だから、エッジがかなり近代的なブラウザであるように見えるので、これはIEとEdgeブラウザの問題です。 Microsoft documentationによれば、それは正常に動作するはずです...しかし、それはありません。 -ms接頭辞の修正を試しましたが、それはまだ壊れていて、それは本当に悪く見えます。 css gridは、これらのブラウザではうまく実装されていないようです。どのように修正できるのか考えてみましょう。そうすれば、IE/Edgeユーザーにとってページは正常に見えます。

---

基本的な問題説明

IEとエッジグリッド項目に常に最初のセルに積層されているので、項目が互いに重畳されます。コンテンツが動的であり、あなたはどのように多くの項目を知らないときに問題があるように

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

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

と... ：あなたがアイテムの正確番号がわかっている場合、あなたはイースリー、それはCSSのグリッドプロパティのいずれかを使用して固定することができますグリッドの親要素に表示されます。

---

HTMLで条件付きコメント

私はIEブラウザのための特別なCSSファイルを提供するために、条件付きコメントを使用するために使用されます。

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

しかし、それははもうあなたを助けにはなりません。 HTMLの条件文は、はIE10以降Internet ExplorerでもEdgeでもに対応していません。あまりにも悪いのは、このソリューションはIE9以下をカバーします。

---

解決策！

Microsoftブラウザでこの問題を解決する方法の1つは、@supportsまたは@mediaクエリを使用して適切なブラウザをキャッチすることです。

は、唯一エッジブラウザを取得する唯一のIE使用

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

を取得@supportsディレクティブについて

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

より使用するには - here。残念ながら、@ supportを使用して、それをサポートしていないIE beacuseを捕まえることはできません - caniuse。 エッジが-ms-ime-alignというプロパティでエッジを選択しているのは、このプロパティがEdgeのみでサポートされているため、使用するのが安全だからです。

---

希望します。 ここには作業DEMOがあります。