Internet Explorer 无法正确显示连续的 div
Internet Explorer not showing divs in a row correctly
不幸的是,我必须支持更高版本的 IE (10 + 9),并且当前设置的 div 在除 IE9 之外的所有浏览器中都能正确显示。我连续有 4 张卡片,IE 10 显示正常,但在 IE 9 中布局显示如下:
我的代码如下:
.wrapper {
width: 1200px;
margin: auto;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -10px;
margin-left: -10px;
}
.row-show-4 {
width: 100%;
}
.card {
position: relative;
padding: 0 10px;
float: left;
width: 25%;
}
HTML 标记
<div class="wrapper">
<div class="row row-show-4">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
...
</div>
</div>
我知道 flexbox 在旧版本的 IE 中无法正确读取,但无法弄清楚这是否是 div 无法正确显示的原因,或者是否存在我可以保留 flexbox 的后备方案对于较新的浏览器。
我相信这应该有效。我无法访问 IE9 或 IE10,所以你需要自己测试一下。
.wrapper {
width: 1200px;
margin: auto;
}
@supports (display: -ms-flexbox) {
.row {
display: -ms-flexbox;
margin-right: -10px;
margin-left: -10px;
}
}
@supports (display: flex) {
.row {
display: flex;
margin-right: -10px;
margin-left: -10px;
}
}
.row-show-4 {
width: 100%;
}
.card {
position: relative;
padding: 0 10px;
float: left; /* Will be ignored in case of flexbox */
width: 25%;
height: 50px; /* To make it visible */
background-color: gray; /* To make it visible */
}
<div class="wrapper">
<div class="row row-show-4">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<div class="row row-show-4">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
*{box-sizing: border-box;}
.wrapper {width: 1200px;margin: auto;}
.row-show-4 {width: 100%;column-count: 4;-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;-webkit-column-gap: 20px;-moz-column-gap: 20px;column-gap: 20px;}
.card{position:relative;padding:0 10px;width:100%;background:#c8c8c8;height:250px;margin-bottom:10px;display:inline-block;margin-top:10px;}
使用bootstrap参考后,似乎在IE 9中运行良好,代码如下:
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.wrapper {
width: 1200px;
margin: auto;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -10px;
margin-left: -10px;
}
.row-show-4 {
width: 100%;
}
.card {
position: relative;
padding: 0 10px;
float: left;
width: 24%;
background-color: gray;
margin-top: 10px;
margin-left: 10px;
}
</style>
<div class="wrapper">
<div class="row row-show-4">
<div class="card">AA</div>
<div class="card">BB</div>
<div class="card">CC</div>
<div class="card">DD</div>
<div class="card">AA</div>
<div class="card">BB</div>
<div class="card">CC</div>
<div class="card">DD</div>
<div class="card">AA</div>
<div class="card">BB</div>
<div class="card">CC</div>
<div class="card">DD</div>
</div>
</div>
输出如下:
感谢大家的回复,我最后做的是为卡片设置高度,它可以解决单独出现在一行中的卡片。
不幸的是,我必须支持更高版本的 IE (10 + 9),并且当前设置的 div 在除 IE9 之外的所有浏览器中都能正确显示。我连续有 4 张卡片,IE 10 显示正常,但在 IE 9 中布局显示如下:
我的代码如下:
.wrapper {
width: 1200px;
margin: auto;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -10px;
margin-left: -10px;
}
.row-show-4 {
width: 100%;
}
.card {
position: relative;
padding: 0 10px;
float: left;
width: 25%;
}
HTML 标记
<div class="wrapper">
<div class="row row-show-4">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
...
</div>
</div>
我知道 flexbox 在旧版本的 IE 中无法正确读取,但无法弄清楚这是否是 div 无法正确显示的原因,或者是否存在我可以保留 flexbox 的后备方案对于较新的浏览器。
我相信这应该有效。我无法访问 IE9 或 IE10,所以你需要自己测试一下。
.wrapper {
width: 1200px;
margin: auto;
}
@supports (display: -ms-flexbox) {
.row {
display: -ms-flexbox;
margin-right: -10px;
margin-left: -10px;
}
}
@supports (display: flex) {
.row {
display: flex;
margin-right: -10px;
margin-left: -10px;
}
}
.row-show-4 {
width: 100%;
}
.card {
position: relative;
padding: 0 10px;
float: left; /* Will be ignored in case of flexbox */
width: 25%;
height: 50px; /* To make it visible */
background-color: gray; /* To make it visible */
}
<div class="wrapper">
<div class="row row-show-4">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<div class="row row-show-4">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
*{box-sizing: border-box;}
.wrapper {width: 1200px;margin: auto;}
.row-show-4 {width: 100%;column-count: 4;-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;-webkit-column-gap: 20px;-moz-column-gap: 20px;column-gap: 20px;}
.card{position:relative;padding:0 10px;width:100%;background:#c8c8c8;height:250px;margin-bottom:10px;display:inline-block;margin-top:10px;}
使用bootstrap参考后,似乎在IE 9中运行良好,代码如下:
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.wrapper {
width: 1200px;
margin: auto;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -10px;
margin-left: -10px;
}
.row-show-4 {
width: 100%;
}
.card {
position: relative;
padding: 0 10px;
float: left;
width: 24%;
background-color: gray;
margin-top: 10px;
margin-left: 10px;
}
</style>
<div class="wrapper">
<div class="row row-show-4">
<div class="card">AA</div>
<div class="card">BB</div>
<div class="card">CC</div>
<div class="card">DD</div>
<div class="card">AA</div>
<div class="card">BB</div>
<div class="card">CC</div>
<div class="card">DD</div>
<div class="card">AA</div>
<div class="card">BB</div>
<div class="card">CC</div>
<div class="card">DD</div>
</div>
</div>
输出如下:
感谢大家的回复,我最后做的是为卡片设置高度,它可以解决单独出现在一行中的卡片。