Html 不同浏览器中相同rem大小的不同宽度

我正在开发一个只使用浮动的网站，没有像flexbox和CSS网格这样的现代CSS，所以我可以支持最多的浏览器。我用于在行和列中设置内容样式的标记如下所示：

<div class = "row"> 
  <div class = "col-1-of-3">[Content]</div>
  <div class = "col-1-of-3">[Content]</div>
  <div class = "col-1-of-3">[Content]</div>
</div>

[内容]
[内容]
[内容]

我对“行”和“列”使用自定义类，不使用任何其他厂商的css，如Bootstrap等。在Firefox和Chrome中，所有宽度都是正确的，但在Edge和Internet Explorer中，在调整窗口大小时，有时宽度不正确。我制作了一个简单的单行标题来演示这个问题。我无法在codepen上复制此问题，因此我有此问题

这是一个简单的3列浮动布局。在Chrome和Firefox中调整窗口大小时，宽度会正确调整，但在Edge和Internet Explorer中，在调整窗口大小时会不断出现故障，列布局也会中断。

如果使用rem和calc（），请使用

例如，IE 11部分支持calc（）

请在堆栈溢出上包含with代码，而不仅仅是在外部站点上。当这种联系失效时，这个问题将失去它的用处。您可能可以使用，以便示例在堆栈溢出上运行。