下記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%;
}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/22 02:38
2019/04/22 02:53
2019/04/22 02:57
2019/04/22 02:59
2019/04/22 09:56