适用于 IE 的内容 polyfill

Question

我在我的项目中使用 fit-content 作为 CSS 宽度。但在 IE 中，它不起作用，根据 this MDN article and this Can I Use。我在 <div> 上使用 width: fit-content。这个有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

尝试删除宽度属性，默认情况下此属性设置为自动。

然后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，适合内容与 IE（或 Edge）不兼容。

删除 "width" 对我没有用，但对于遇到此问题的任何其他人来说，将 "float: left" 应用于元素是可行的。

适用于 IE 的内容 polyfill

fit-content polyfill for IE

css

internet-explorer

polyfills

我的代码（严重精简）：