首页 文章

CSS3的浏览器兼容性问题，适用于WIDTH属性的'max-content'和'fit-content'的值

提问于
浏览 次
0

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

}
css3 internet-explorer cross-browser microsoft-edge

1 回答

  • 0

    您可以从评论中的链接看到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

    回复于

相关问题