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