html - IE 11 中的 CSS 网格问题
问题描述
我在 HTML/CSS 中创建了一个砌体样式网格。为此,我使用了
显示:具有“网格行”和“网格列”的网格属性。
这在 Chrome、Firefox 和 Edge 中效果很好,尚未在 Safari 上尝试过,但不幸的是,它在 IE 11 浏览器中呈现时存在问题。它没有得到一个漂亮的网格布局,如附加的笔所示,它只是显示 4 个 1x1 列在彼此的顶部。
是否有任何 IE 特定属性可以分配给我的 CSS 类以使其在所有浏览器中正确显示?
#container {
display:inline-block;
overflow: hidden; /* clip the excess when child gets bigger than parent */
}
#container img {
display: block;
transition: transform .4s; /* smoother zoom */
}
#container:hover img {
transform: scale(1.3);
transform-origin: 50% 50%;
}
.wrapper {
display: grid;
grid-gap: 0px;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 400px 400px;
color: #000;
}
.a {
grid-column: 1;
grid-row: 1/3;
text-align:center;
color:#fff;
display:block;
position:relative;
overflow:hidden;
}
.b {
grid-column: 2 / span 2;
grid-row: 1;
color:#fff;
position:relative;
overflow:hidden;
}
.c {
grid-column: 2;
grid-row: 2;
color:#fff;
position:relative;
overflow:hidden;
}
.d {
grid-column: 3;
grid-row: 2;
color:#fff;
position:relative;
overflow:hidden;
}
.box {
border-radius: 0px;
padding: 10px;
font-size: 150%;
display:block;
position:relative;
}
.ctr {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.imex-btn {
background-color: #4080fa;
border: none;
color: white;
padding: 10px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 70px;
cursor: pointer;
font-family: "Century Gothic";
}
.imex-btn:hover {
background-color: #000;
color: #4080fa;
}
<div class="wrapper">
<div class="box a">
<div id="container">
<img id="image" src="https://via.placeholder.com/500x900
C/O https://placeholder.com/">
<div class="ctr"><h2 class="white">BOX A<h2>
</div>
<a href="#" class="ctr imex-btn">VIEW NOW</a>
</div>
</div>
<div class="box b">
<div id="container">
<img id="image" src="https://via.placeholder.com/1200x900/C/O https://placeholder.com/">
<div class="ctr"><h2 class="white">BOX B</h2>
</div>
<a href="#" class="ctr imex-btn">VIEW NOW</a>
</div>
</div>
<div class="box c">
<div id="container">
<img id="image" src="https://via.placeholder.com/500x500
C/O https://placeholder.com/">
<div class="ctr"><h2 class="white" style="text-align:center">BOX C</h2>
</div>
<a href="#" class="ctr imex-btn">READ MORE</a>
</div>
</div>
<div class="box d">
<div id="container">
<img id="image" src="https://via.placeholder.com/500x500
C/O https://placeholder.com/">
<div class="ctr"><h2 class="white" style="text-align:center">BOX D</h2>
</div>
<a href="#" class="ctr imex-btn">READ MORE</a>
</div>
</div>
</div>
解决方案
我添加了一些 css 以使其在 IE 中工作。注意-ms-
css中添加的前缀。您也可以参考这篇文章,它解释了如何在 IE 中支持 css 网格。
#container {
display: inline-block;
overflow: hidden; /* clip the excess when child gets bigger than parent */
}
#container img {
display: block;
transition: transform .4s; /* smoother zoom */
}
#container:hover img {
transform: scale(1.3);
transform-origin: 50% 50%;
}
.wrapper {
display: -ms-grid;
display: grid;
grid-gap: 0px;
grid-template-columns: 33% 33% 33%;
-ms-grid-columns: 33% 33% 33%;
grid-template-rows: 400px 400px;
-ms-grid-rows: 400px 400px;
color: #000;
}
.a {
grid-column: 1;
grid-row: 1/3;
-ms-grid-column: 1;
-ms-grid-row-span: 2;
text-align: center;
color: #fff;
display: block;
position: relative;
overflow: hidden;
}
.b {
grid-column: 2 / span 2;
grid-row: 1;
-ms-grid-row:1;
-ms-grid-column-span: 2;
-ms-grid-column:2;
color: #fff;
position: relative;
overflow: hidden;
}
.c {
grid-column: 2;
grid-row: 2;
-ms-grid-column:2;
-ms-grid-row:2;
color: #fff;
position: relative;
overflow: hidden;
}
.d {
grid-column: 3;
grid-row: 2;
-ms-grid-column:3;
-ms-grid-row:2;
color: #fff;
position: relative;
overflow: hidden;
}
.box {
border-radius: 0px;
padding: 10px;
font-size: 150%;
display: block;
position: relative;
}
.ctr {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.imex-btn {
background-color: #4080fa;
border: none;
color: white;
padding: 10px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 70px;
cursor: pointer;
font-family: "Century Gothic";
}
.imex-btn:hover {
background-color: #000;
color: #4080fa;
}
<div class="wrapper">
<div class="box a">
<div id="container">
<img id="image" src="https://via.placeholder.com/500x900
C/O https://placeholder.com/">
<div class="ctr">
<h2 class="white">BOX A</h2>
</div>
<a href="#" class="ctr imex-btn">VIEW NOW</a>
</div>
</div>
<div class="box b">
<div id="container">
<img id="image" src="https://via.placeholder.com/1200x900/C/O https://placeholder.com/">
<div class="ctr">
<h2 class="white">BOX B</h2>
</div>
<a href="#" class="ctr imex-btn">VIEW NOW</a>
</div>
</div>
<div class="box c">
<div id="container">
<img id="image" src="https://via.placeholder.com/500x500
C/O https://placeholder.com/">
<div class="ctr">
<h2 class="white" style="text-align:center">BOX C</h2>
</div>
<a href="#" class="ctr imex-btn">READ MORE</a>
</div>
</div>
<div class="box d">
<div id="container">
<img id="image" src="https://via.placeholder.com/500x500
C/O https://placeholder.com/">
<div class="ctr">
<h2 class="white" style="text-align:center">BOX D</h2>
</div>
<a href="#" class="ctr imex-btn">READ MORE</a>
</div>
</div>
</div>
推荐阅读
- git - git clone 递归地没有子模块的子模块
- c - windows如何在没有C编译器的情况下启动和运行?
- javascript - 如何在 QML 的 TableView 中隐藏未使用的行?
- vue.js - 404 未找到页面 nginx / 1.18.0
- python - Python基本计数原理可能的排列
- node.js - 如何在节点快递应用程序中将数据从一个控制器传递到另一个控制器?
- vue.js - 使用 Azure 身份验证的 Vue 登录
- flutter - Flutter 蓝牙特征读取报错
- javascript - 如何更改 plotly js 中的 XAXIS 值以另一种方式显示日期?
- c# - C# 8 可空引用类型嵌套保护