我想在任何具有动态宽度的容器内创建一些列，这些列具有可容纳DIV的宽度和边距的百分比。
example
<div class="gridFluid">
<div class="col-1-4"></div>
<div class="col-1-4"></div>
<div class="col-1-4"></div>
<div class="col-1-4"></div>
</div>
* {
margin: 0;
padding: 0;
}
body {
font-size: 1%
}
.gridFluid {
width: 960px;
display: table;
background: #eee;
font-size: 0px;
overflow: auto;
zoom: 1;
}
.col-1-4 {
background: #ddd;
height: 200px;
width: 23%;
display: table-cell;
*display: inline;
zoom:1;
margin-left: 1%;
margin-right: 1%;
float: left;
}
它在所有地方都按预期工作，但是在IE7中，最后一列无法正确地放在一行中。可能是因为它在除保证金之外的DIV之间增加了额外的空间。
我不想为IE7使用不同的宽度或边距（宽度：24.5％而不是25）。因为这不是一个适当的解决方案。我正在寻找一个好的解决方案。
可能是IE7的已知问题，我在寻找解决方案时发现了很多与其相关的问题，但没有找到解决问题的适当方法。
最佳答案
让我们根据您的CSS进行一些快速计算。
您希望每一列都占容器宽度的23％。因此，每列应为：
.23 * 960 = 220.8
因此，每列应为220.8像素。
您希望每个边距为1％宽。
0.01 * 960 = 9.6
因此，每个边距应为9.6像素宽。
等一下。我们那里有一些局部像素。如何处理.8或.6像素？好吧，你必须做一些舍入。但是，您采用哪种方式向上或向下取整？好吧，如果四舍五入，您最终会得到4列大小为221像素的列。
221 * 4 = 884
因此，列的总宽度估计为884像素。
利润率呢？
8 * 10 = 80
因此，页边距的总宽度估计为80像素。
现在，让我们将这些数字加在一起。
80 + 884 = 964
嗯...看起来我们这里有4个额外的像素...最好将内容向下推到一行以适合960px宽的框。
这就是为什么您的列被压低的原因。
另外，请检出：http://ejohn.org/blog/sub-pixel-problems-in-css/
关于html - float DIV中具有左右边距的IE7间距问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15802797/