Question

Width属性“ 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

}

Answer 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

CSS3对WIDTH属性的'max-content'和'fit-content'值的浏览器兼容性问题

1 个答案: