为什么此网格无法在Internet Explorer上运行？

Question

在chrome和firefox中运行良好，但在IExplorer中，这个网格似乎打破了。

为什么行的最后一个元素会被推到下一行，好像它没有空格一样？

我发现如果我添加margin-right: -0.3px（代码集上的第17行）它修复了IE中的问题。

有更好的方法吗？

谢谢！

codepen：https://codepen.io/Jaunbruns/pen/qxNENG

HTML：

 <div class="grid">
        <div class="row">
            <div class="col-1-of-1"> 1 / 1 </div>
        </div>

        <div class="row">
            <div class="col-2-of-3"> 2 / 3 </div>
            <div class="col-1-of-3"> 1 / 3 </div>
        </div>
        <div class="row">
            <div class="col-3-of-4"> 3 / 4 </div>
            <div class="col-1-of-4"> 1 / 4 </div>
        </div>

        <div class="row">
            <div class="col-2-of-4"> 2 / 4 </div>
            <div class="col-1-of-4"> 1 / 4</div>
            <div class="col-1-of-4"> 1 / 4</div>

        </div>

        <div class="row">
            <div class="col-1-of-4"> 1 / 4</div>
            <div class="col-1-of-4"> 1 / 4</div>
            <div class="col-1-of-4"> 1 / 4</div>
            <div class="col-1-of-4"> 1 / 4</div>
        </div>

        <div class="row">
            <div class="col-1-of-12"> 1 / 12</div>
            <div class="col-1-of-12"> 1 / 12</div>
            <div class="col-1-of-12"> 1 / 12</div>
            <div class="col-1-of-12"> 1 / 12</div>
            <div class="col-1-of-12"> 1 / 12</div>
            <div class="col-1-of-12"> 1 / 12</div>
            <div class="col-1-of-24"> 1 / 24</div>
            <div class="col-1-of-24"> 1 / 24</div>
            <div class="col-1-of-24"> 1 / 24</div>
            <div class="col-1-of-24"> 1 / 24</div>
            <div class="col-1-of-24"> 1 / 24</div>
            <div class="col-1-of-24"> 1 / 24</div>
            <div class="col-1-of-24"> 1 / 24</div>
            <div class="col-1-of-24"> 1 / 24</div>
            <div class="col-1-of-24"> 1 / 24</div>
            <div class="col-1-of-24"> 1 / 24</div>
            <div class="col-1-of-24"> 1 / 24</div>
            <div class="col-1-of-24"> 1 / 24</div>
        </div>

    </div>

SCSS：

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  // default font-size = 16px
  // 10px = 62.5% of 16px

  font-size: 62.5%; // 1rem = 10px
}

body {
  box-sizing: border-box;
}


@mixin clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

$grid-width:  50rem;
$gutter-vertical: 2rem;
$gutter-horizontal: 0.5rem;

.row {
  max-width: $grid-width;
  background: rgba(209, 138, 138, 0.446);
  margin: 0 auto; // top-bot = 0 left right auto

  // put margin on all children except the last child
  &:not(:last-child) {
    margin-bottom: $gutter-vertical;
  }
  @include clearfix;

  [class^="col-"] {
    overflow: hidden;
    color: rgb(0, 0, 0);
    font-size: 30px;
    font-weight: 400;
    background-color: limegreen;
    float: left;
    &:not(:last-child) {
      margin-right: $gutter-horizontal;
    }

    &:last-child {
      background: #1a9b6e;
      margin-right: -0.3px;
    }
  }
}

@function calc-x-of-y($x,$y) {
  @return calc( (100% - ( #{$gutter-horizontal} * (#{$y} / #{$x} - 1)     ) ) /   (#{$y} / #{$x}) );
}

.col-1-of-1 {
  width: 100%;
}

.col-1-of-2 {
  width: calc-x-of-y(1, 2);
}

.col-1-of-3 {
  width: calc-x-of-y(1, 3);
}

.col-2-of-3 {
  width: calc-x-of-y(2, 3);
}

.col-2-of-4 {
  width: calc-x-of-y(2, 4);
}

.col-1-of-12 {
  width: calc-x-of-y(1, 12);
}

.col-1-of-4 {
  width: calc-x-of-y(1, 4);
}

.col-1-of-24 {
  width: calc-x-of-y(1, 24);
}

.col-3-of-4 {
  width: calc-x-of-y(3, 4);
}