IE11で grid 画像 表示されません（クロームでは問題なし）

Question

下記HTML　CSSについて
Chromeでは表示されますが、
IE11でうまく表示されません。
class gを3×3マスのgrid表示させたいです。
IE11だとグリッド表示ができず、img、h4要素が重なり合ってしまい（縦に並んでいる）かつ画像も表示されません。
解決策をお願いいたします。

HTML

<article class ="g-index"> <a href="" class ="g"> <img src = "image/face.jpg" class ="face-icon"></img> <img src = "image/i.jpg" class ="photo"></img> <h4 class ="g-tag">#SSSSS</h4> <h4 id ="g-name">MMMM</h4> </a> </article>

CSS

.g-index {
text-align: center;
width: 90%;
height: 1500px;
background-color: rgb(245, 245, 245);
position: absolute;
left:5%;
display: grid;
grid-gap: 3px;
grid-template-rows: 400px 400px 400px;
grid-template-columns: 33% 33% 33%;
-ms-grid-columns: 33% 33% 33%;
-ms-grid-rows: 400px 400px 400px;
z-index: 1;
}

.g {
position: relative;
background-color: white;
border-style: solid;
border-width: 1px;
border-color: rgb(226, 226, 226);
z-index: 2;
}

.face-icon {
height: 80px;
width: 80px;
border-color: rgb(226, 226, 226);
border-radius: 50%;
position: absolute;
top: 10px;
left: 10px;
z-index: 4;
}

.photo {
position: absolute;
height: 70%;
width: 80%;
top: 10%;
left: 10%;
}

Answer 1

ご自分で記述した-ms-grid-* プロパティを一旦削除してから、
Autoprefixer onlineにCSSを放り込んで
変換してみてください。IE11向けにどんな記述が必要なのかわかります。

Comments

[lucky_luci]

ありがとうございます。何度も試してみましたが、要素が少し左に動いたのみで、表示されない問題が解消されません。

[aKusano]

画像が表示されないのはgirdレイアウト関係ないと思いますよ。
<img src = "image/face.jpg" class ="face-icon"></img>
<img src = "image/i.jpg" class ="photo"></img>
と書いてますけど、</img>は文法的に不要なのでこれが悪さしてるかもしれませんね。

[aKusano]

あと、これ本当にchromeでも正しく意図したとおりに表示されてるんですかね？
display:gridを「.g-index」に設定してますが、これだとgridアイテムとして配置できるのは直下のaタグだけで、その子要素のh4やimgはグリッドレイアウトのコントロール対象外になってるはずですが。
そもそも作りたいレイアウト自体がどういうものなのか、現状どうなっているのかが分からないので
詳細な検証はできかねます。

[aKusano]

ちなみにIE11はdisplay:inlineのアイテムはグリッドレイアウトの子アイテムとしてコントロール出来ないクソ仕様なので、とりあえず .g は display:block; にしてみると表示が変わるかもしれません。

[lucky_luci]

ありがとうございます。＠supportで解決できました。

Answer 2

Autoprefixerを使ってもIE11でGridが崩れるパターンは grid-template-areas を記載せず、grid-gapを使っているなどの場合です。参照
機能クエリで対応することをご検討されてはいかがでしょうか。

Comments

[lucky_luci]

ありがとうございます。＠supportで解決できました。

[x_x]

気になるのでコメントしておくと、＠support ではなく @supports です。
そして IE はそもそも @supports に対応していないので無視されます。