IE計算寬度問題

Question

這裏有一個小提琴：https://jsfiddle.net/ftqft005/1/

基本上，我想要的「東西」，每個紅盒子彼此旁邊2對齊，到行，用完全相等的空間的左側和右側。所以，「左邊的東西」在左邊，「右邊的東西」在右邊。我知道如果我將.product-link的寬度從-7.5px更改爲-15px，它們會彼此相鄰，但是這兩個框在中心不完全對齊。

所以基本上，如果我改變了：

.product-link { 
float: left; 
background-color: red; 
width: calc(99.99% * 1/2 - 7.5px); 
width: calc(99.99% * 1/2 - 0.46875rem); 
} 

這樣：

.product-link { 
float: left; 
background-color: red; 
width: calc(99.99% * 1/2 - 15px); 
width: calc(99.99% * 1/2 - 0.9375rem); 
} 

它有點工作，但它不是完全一致就像是Chrome和Firefox在網站上。他右邊的空間比左邊多一點。

我不知道爲什麼它甚至沒有在小提琴上工作，因爲相同的代碼在Chrome和FireFox中適用於我，但是在IE和Edge中卻沒有效果。

Answer 1

我想我明白了：https://jsfiddle.net/ftqft005/4/

基本上，我試圖仿效這個插件：https://github.com/peterramsing/lost

下面是這個人的代碼，我模仿我的。它應該給出一個對稱的三項網格佈局。不過，我不確定是否需要清除。

div { 
    width: calc(99.9% * 1/3 - (30px - 30px * 1/3)); 
} 
div:nth-child(1n) { 
    float: left; 
    margin-right: 30px; 
    clear: none; 
} 
div:last-child { 
    margin-right: 0; 
} 
div:nth-child(3n) { 
    margin-right: 0; 
    float: right; 
} 
div:nth-child(3n + 1) { 
    clear: both; 
}