IE7间距问题浮动DIV与左右边距

Question

我想创建一些宽度和边界在DIVs百分比的列可以适应，在任何具有动态宽度的容器内。

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的已知问题，当我寻找解决方案时，我发现很多问题与它有关，但没有得到任何正确的方法来解决我的问题。

Answer 1

只是做一个小的改变你的CSS ...

变化： -

.col-1-4 { 
    width: 23%;  
} 

要这样： -

.col-1-4 { 
    *width: 22.9%; 
    width: 23%;  
} 

Answer 2

让我们做一些基于快速计算关闭你的CSS。

您希望每列都是容器宽度的23％。因此，每列应该是：

0.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个额外的像素...更好地推动内容下一行，以适应960像素宽框。

这就是为什么您的列正被推下。 此外，退房：http://ejohn.org/blog/sub-pixel-problems-in-css/

Answer 3

双divs如何。这显然会解决问题。

.col-1-4 { 
    position:relative; 
    background: #eee; 
    height: 200px; 
    width: 25%; 
    /*******************************/ 
    /* Don't use this properties, not necessary here */ 
    display: table-cell; 
    *display: inline; 
    /*******************************/ 
    zoom:1; 
    float: left; 
} 
.col-1-4>div { 
    background: #ddd; 
    position:absolute; 
    left:4%; 
    right:4%; /* 100/25 = 4 */ 
    top:0; 
    bottom:0; 
} 

Working Fiddle