html - IE中的Flex项目宽度未调整大小
问题描述
我正在尝试构建大量“图块”并且在 Internet Explorer 中遇到问题 - 大多数/所有其他浏览器似乎都很好。问题是,我希望这些图块在桌面上每行只有 4 个,在移动设备上每行 2 个,但在 IE 中,其他图块只是挤在同一行而不是放到下一行。
弹性项目的宽度似乎不起作用,应该是 23.5%(在桌面上)和 48.5% 在手机上。有人可以解释这里发生了什么吗?看来IE不喜欢当代代码!
/* Flex Tests */
.sad-flex {
display: flex;
flex-flow: row wrap;
}
.flex-item {
width: 23.5%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flex-item:not(:nth-of-type(4n+1)) { margin-left: 2% }
.flex-item:nth-of-type(n+5) { margin-top: 2% }
.flex-item-image-link { width: 100% }
.flex-item img {
width: 100%;
background-size: cover;
background-position: center;
}
.flex-item, .flex-text-content {
display: flex;
flex-direction: column;
align-items: center;
font-size: 1em;
text-align: center;
font-family: arial; /* perhaps remove */
justify-content: flex-start;
}
.flex-text-content { padding: 10px }
.flex-item .flex-text.header {
margin-bottom: 0;
font-weight: 700;
width: 100%;
}
.flex-item .flex-text.header a { color: #000 }
.flex-item .flex-text.price {
padding-top: 20px;
font-size: 1.4em;
color: grey;
}
.flex-item .flex-text.description {
font-size: 1em;
padding-top: 20px;
max-height: 6em; /* limits to 3 lines of text */
overflow: hidden;
}
.flex-item .flex-btn {
border: none;
outline: 0;
padding: 12px;
color: #fff;
background-color: #000;
cursor: pointer;
width: 100%;
font-size: 1.3em;
margin: auto auto 0 auto;
}
.flex-item .flex-btn:hover { opacity: 0.7 }
.flex-item ul { text-align: left }
@media (max-width: 767px) {
.flex-item:not(:nth-of-type(4n+1)) { margin-left: 3% }
.flex-item { width: 48.5% }
.flex-item:not(:nth-of-type(even)) { margin-left: 0 }
.flex-item:nth-of-type(n+3) { margin-top: 3% }
}
/* IE FIXES */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.sad-flex {
-ms-flex-direction: row;
-ms-flex-wrap: wrap;
}
.flex-item {
-ms-flex: 1;
}
.flex-item * { width: 100% }
}
<div class="sad-flex">
<div class="flex-item">
<a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
<div class="flex-text-content">
<h2 class="flex-text header"><a href="#">textko</a></h2>
<span class="flex-text price">$12.34</span>
<span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
</div>
<button class="flex-btn" onclick="#'">button</button>
</div>
<div class="flex-item">
<a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
<div class="flex-text-content">
<h2 class="flex-text header"><a href="#">textko</a></h2>
<span class="flex-text price">$12.34</span>
<span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
</div>
<button class="flex-btn" onclick="#'">button</button>
</div>
<div class="flex-item">
<a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
<div class="flex-text-content">
<h2 class="flex-text header"><a href="#">textko</a></h2>
<span class="flex-text price">$12.34</span>
<span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
</div>
<button class="flex-btn" onclick="#'">button</button>
</div>
<div class="flex-item">
<a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
<div class="flex-text-content">
<h2 class="flex-text header"><a href="#">textko</a></h2>
<span class="flex-text price">$12.34</span>
<span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
</div>
<button class="flex-btn" onclick="#'">button</button>
</div>
<div class="flex-item">
<a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
<div class="flex-text-content">
<h2 class="flex-text header"><a href="#">textko</a></h2>
<span class="flex-text price">$12.34</span>
<span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
</div>
<button class="flex-btn" onclick="#'">button</button>
</div>
<div class="flex-item">
<a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
<div class="flex-text-content">
<h2 class="flex-text header"><a href="#">textko</a></h2>
<span class="flex-text price">$12.34</span>
<span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
</div>
<button class="flex-btn" onclick="#'">button</button>
</div>
</div>
解决方案
IE 不支持flex: flex-grow flex-shrink flex-basis
简写。
您需要将其更改为flex-grow
.
例如这个
flex: 1 2 30px;
应该用这个替换
flex-grow: 1;
flex-shrink: 2;
flex-basis: 30px;
在你的情况下
.flex-item {
flex-grow: 1;
}
/* Flex Tests */
.sad-flex {
display: flex;
flex-flow: row wrap;
}
.flex-item {
width: 23.5%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flex-item:not(:nth-of-type(4n+1)) { margin-left: 2% }
.flex-item:nth-of-type(n+5) { margin-top: 2% }
.flex-item-image-link { width: 100% }
.flex-item img {
width: 100%;
background-size: cover;
background-position: center;
}
.flex-item, .flex-text-content {
display: flex;
flex-direction: column;
align-items: center;
font-size: 1em;
text-align: center;
font-family: arial; /* perhaps remove */
justify-content: flex-start;
}
.flex-text-content { padding: 10px }
.flex-item .flex-text.header {
margin-bottom: 0;
font-weight: 700;
width: 100%;
}
.flex-item .flex-text.header a { color: #000 }
.flex-item .flex-text.price {
padding-top: 20px;
font-size: 1.4em;
color: grey;
}
.flex-item .flex-text.description {
font-size: 1em;
padding-top: 20px;
max-height: 6em; /* limits to 3 lines of text */
overflow: hidden;
}
.flex-item .flex-btn {
border: none;
outline: 0;
padding: 12px;
color: #fff;
background-color: #000;
cursor: pointer;
width: 100%;
font-size: 1.3em;
margin: auto auto 0 auto;
}
.flex-item .flex-btn:hover { opacity: 0.7 }
.flex-item ul { text-align: left }
@media (max-width: 767px) {
.flex-item:not(:nth-of-type(4n+1)) { margin-left: 3% }
.flex-item { width: 48.5% }
.flex-item:not(:nth-of-type(even)) { margin-left: 0 }
.flex-item:nth-of-type(n+3) { margin-top: 3% }
}
/* IE FIXES */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.sad-flex {
-ms-flex-direction: row;
-ms-flex-wrap: wrap;
}
.flex-item {
flex-grow: 1;
}
.flex-item * { width: 100% }
}
<div class="sad-flex">
<div class="flex-item">
<a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
<div class="flex-text-content">
<h2 class="flex-text header"><a href="#">textko</a></h2>
<span class="flex-text price">$12.34</span>
<span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
</div>
<button class="flex-btn" onclick="#'">button</button>
</div>
<div class="flex-item">
<a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
<div class="flex-text-content">
<h2 class="flex-text header"><a href="#">textko</a></h2>
<span class="flex-text price">$12.34</span>
<span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
</div>
<button class="flex-btn" onclick="#'">button</button>
</div>
<div class="flex-item">
<a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
<div class="flex-text-content">
<h2 class="flex-text header"><a href="#">textko</a></h2>
<span class="flex-text price">$12.34</span>
<span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
</div>
<button class="flex-btn" onclick="#'">button</button>
</div>
<div class="flex-item">
<a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
<div class="flex-text-content">
<h2 class="flex-text header"><a href="#">textko</a></h2>
<span class="flex-text price">$12.34</span>
<span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
</div>
<button class="flex-btn" onclick="#'">button</button>
</div>
<div class="flex-item">
<a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
<div class="flex-text-content">
<h2 class="flex-text header"><a href="#">textko</a></h2>
<span class="flex-text price">$12.34</span>
<span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
</div>
<button class="flex-btn" onclick="#'">button</button>
</div>
<div class="flex-item">
<a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
<div class="flex-text-content">
<h2 class="flex-text header"><a href="#">textko</a></h2>
<span class="flex-text price">$12.34</span>
<span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
</div>
<button class="flex-btn" onclick="#'">button</button>
</div>
</div>
推荐阅读
- swift - Swift 类包含自己类型的属性
- reactjs - 在反应中使用输入文本框来显示建议的下拉列表
- neo4j - 获取不穿过某个节点的子图
- vega-lite - vega-lite 条形图堆积的彩色值
- vba - 调用 GDIP GetImageGraphicsContext 或 GdipCreateHBITMAPFromBitmap 函数时,Windows 10(64 位)上的 MS Access 2019(64 位)崩溃
- python - Django 在 post_save 中向实例添加一个额外的非托管字段
- karate - 当我们在 logback-test.xml 中以“DEBUG”的日志级别运行时出现“Java Heap”内存问题
- java - Hadoop 客户端不断读取本地文件系统
- javascript - 预测搜索匹配不区分大小写的数组元素,当大小写不正确时不显示
- arrays - 对数组进行排序时最小化插入次数