我有这个 flex 布局,它在 Chrome 和除忽略 @media 查询的 IE 之外的任何主要浏览器中完全按照我的要求工作。
http://jsfiddle.net/U2W72/17/embedded/result/
* {margin: 0px; padding 0px'}
.thumb {
float: left;
width:16.8%;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4%;
background: pink;
height: 200px;
}
.thumb:nth-child(5n) {
margin-right: 0px;
}
.thumb:nth-child(5n+1) {
margin-left: 0px;
}
@media (max-width: 1200px) {
.thumb, .thumb:nth-child(1n) {
width:22%;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4%;
}
.thumb:nth-child(4n) {
margin-right:0;
}
.thumb:nth-child(4n+1) {
margin-left:0;
}
}
@media (max-width: 600px) {
.thumb, .thumb:nth-child(1n) {
width:48%;
}
.thumb:nth-child(2n) {
margin-right:0;
}
.thumb:nth-child(2n+1) {
margin-left:0;
}
}
@media (max-width: 400px) {
.thumb, .thumb:nth-child(1n) {
width:100%;
margin-left: 0px;
margin-right: 0px;
}
}
问题
虽然我对它的 flex 方面不起作用很满意,但媒体查询告诉它在左右元素上没有边距,而且由于 IE 不读取它,它确实给了它一个边距,这使得它太宽并且将第 5 个框从末尾掉落。
问题
如何在不将第 5 项放到下一行的情况下使 5 列布局为 IE 优雅地降级。
可能的解决方案
- 编写一个仅适用于 IE 的 css 规则,将 IE 中的框宽度设置为 16% 而不是 16.8%
- 将默认布局设置为 16%,然后使用 @media 将宽度覆盖为兼容浏览器的 16.8%
我愿意接受任何想法或建议。谢谢!
最佳答案
您的 CSS 中存在语法错误:
* {margin: 0px; padding 0px'}
这会导致您的所有 CSS 规则都被忽略。您正在用单引号关闭填充,将其删除。
另外我认为如果你使用 display:inline-block;你会发现一个很好的流体网格布局。
关于html - 提高 flex 布局的IE兼容性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22784000/