WIDTH 属性的“max-content”和“fit-content”值与 CSS3 的浏览器兼容性问题 [重复]

【问题标题】：Browser compatibility issue with CSS3 for the values of 'max-content' and 'fit-content' for the WIDTH attribute [duplicate]WIDTH 属性的“max-content”和“fit-content”值与 CSS3 的浏览器兼容性问题 [重复]
【发布时间】：2019-05-10 11:15:12
【问题描述】：

宽度属性“max-content”和“fit-content”的值不适用于 Edge 和 Internet Explorer。

 .div{
    border: 1px solid;
    margin-left: auto;
    margin-right: auto;
    width: max-content;
    width: -moz-max-content; //works fine on Mozilla
    width: -ms-max-content; //doesn't work on EDGE and MS-Explorer

}

【问题讨论】：

caniuse.com/#search=max-content - 你的意思是什么？

标签： css internet-explorer cross-browser microsoft-edge

【解决方案1】：

您可以从评论中的链接中看到，IE 和 Edge 都不支持 max-content 和 fit-content。

我建议也许有一个使用 display:inline-block 的解决方法。由于不知道您的页面是如何设计的，所以我只是在我这边做一个测试。希望这会有所帮助。

CSS。

    <style>
    .box {
        background-color: #f0f3f9;
        padding: 10px;
        margin: 10px auto 20px;
        overflow: hidden;
    }

    .inline-block {
        display: inline-block;
    }

</style>

HTML。

    <strong>display:inline-block;</strong>
    <div class="box inline-block">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/200x200.jpg">
      <p>What a lovely pattern we got there in this image which is encapsulted in a figure.</p>
   </div>

另外，你也可以参考这个链接：CSS3 -ms-max-content in IE11

【讨论】：