IE problème de largeur de calc

Question

est ici un violon: https://jsfiddle.net/ftqft005/1/

Fondamentalement, je veux chaque boîte rouge de « trucs » pour aligner à côté de l'autre, deux à une rangée, avec un espace parfaitement égal à gauche et à droite. Donc, "left stuff" va à gauche, "right stuff" va à droite. Je sais que si je change la largeur de .product-link de -7.5px à -15px, ils vont à côté l'un de l'autre, mais alors les deux boîtes ne sont pas parfaitement alignées au centre.

Donc, fondamentalement, si je change ceci:

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

à ceci:

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

Il fonctionne en quelque sorte, mais il est pas parfaitement aligné comme il est dans Chrome et FireFox sur le site. Il y a un peu plus d'espace à droite qu'à gauche. Je ne sais pas pourquoi ça ne fonctionne même pas dans le violon, parce que ce même code fonctionne pour moi dans Chrome et FireFox, mais il casse dans IE et Edge.

Answer 1

Je pense que je l'ai: https://jsfiddle.net/ftqft005/4/

En fait, je tentais d'imiter ce plugin: https://github.com/peterramsing/lost

Voici le code de cette personne que je le mien Modelé. Cela devrait donner une disposition symétrique de la grille à trois éléments. Je ne suis pas sûr si le clair est nécessaire, cependant.

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