提高弹性布局的IE兼容性

Question

我有这个弹性布局，它的工作方式与我希望它在Chrome和任何主要浏览器，除了IE，它忽略@media查询。

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;
    }
}

问题

虽然我对它不起作用的弹性方面没有意见，但是媒体查询告诉它在左右项上不要有页边距，而且由于IE不读这个，它确实给了它一个边距，这使得它太宽了，把第五个框从末尾掉了下来。

问题

如何使5列布局降级为IE，而不把第5项下到下一行。

可能的解决方案

• 编写仅限IE的css规则，将IE中的框宽设置为16%，而不是16.8%
• 将默认布局设置为16%，然后使用@media覆盖兼容浏览器的宽度为16.8%

我愿意接受任何想法或建议。谢谢!

Answer 1

CSS中有一个语法错误：

 * {margin: 0px; padding 0px'}

这会导致所有CSS规则被忽略。你是用一个单引号关闭填充，删除它。

​

​

此外，我认为如果你使用显示:内联块；你会发现一个很好的流体网格布局。

Answer 2

在头部包括元标签..。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->