适合IE的内容填充

Question

我在项目中使用fit-content作为CSS宽度。但是根据this MDN article和this Can I Use，在IE中，它不起作用。我在width: fit-content上使用<div>。是否有一个polyfill？如果还有另一种方法没有polyfill，我会很乐意接受。

我的代码（严重删除）：

var i = 0;
setInterval(function(){document.getElementById('total').innerHTML = `${++i} s`}, 1000);

#total {
  position: absolute;
  margin-top: 10px;
  margin-left: 10px;
  font: 300px "Times New Roman";
  border: 1px solid #000;
  max-width: 88.9%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content; /* Doesn't work in IE */
}

<div id="total">0</div>

Answer 1

尝试删除width属性，默认情况下此属性设置为auto。

然后div将自动增加，代码如下：

<script type="text/javascript">
    var i = 0;
    setInterval(function () { document.getElementById('total').innerHTML = (++i) + " s" }, 1000);

</script>
<style type="text/css">
    #total {
        position: absolute;
        margin-top: 10px;
        margin-left: 10px;
        font: 300px "Times New Roman";
        border: 1px solid #000;
        max-width: 88.9%;
    }
</style>
<div id="total">0</div>

输出如下（使用IE 11）：

Answer 2

根据MDN web docs，fit-content与IE（或Edge）不兼容。

删除“宽度”对我来说不起作用，但是对于其他绊脚石的人，对元素应用“ float：left”是可行的。