IEのcalc幅の問題

Question

はここでフィドルです。それで、左のものは左に、右のものは右に移動します。 .product-linkの幅を-7.5pxから-15pxに変更すると、それらは互いに隣り合っていますが、2つのボックスは完全に中央に配置されていません。そこで、基本的

、私はこの変更した場合：これに

.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://github.com/peterramsing/lost

ここで私は後に鉱山をモデル化し、この人のコードです：https://jsfiddle.net/ftqft005/4/

基本的に、私はこのプラグインをエミュレートしようとしていました。対称的な3つのアイテムグリッドレイアウトを与える必要があります。しかし、明確であるかどうかはわかりません。

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