Проблема совместимости браузера с CSS3 для значений «max-content» и «fit-content» для атрибута WIDTH - PullRequest
Новая
       28

Проблема совместимости браузера с CSS3 для значений «max-content» и «fit-content» для атрибута WIDTH

0 голосов
/ 09 декабря 2018

Значения атрибута 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

}

1 Ответ

0 голосов
/ 10 декабря 2018

вы можете увидеть по ссылке в комментарии, что как max-content, так и fit-content не поддерживаются IE и Edge.

Я полагаю, что, возможно, существует обходной путь, который использует 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-содержание в IE11

...