質問: 下記HTML CSSについて Chromeでは表示されますが、 IE11でうまく表示されません。 class gを3×3マスのgrid表示させたいです。 IE11だとグリッド表示ができず、img、h4要素が重なり合ってしまい(縦に並んでいる)かつ画像も表示されません。 解決策をお願いいたします。 HTML #SSSSS MMMM 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%; }
回答: ご自分で記述した`-ms-grid-*` プロパティを一旦削除してから、 Autoprefixer onlineにCSSを放り込んで 変換してみてください。IE11向けにどんな記述が必要なのかわかります。