IE11中的CSS3 -ms-max-content [英] CSS3 -ms-max-content in IE11

问题描述

我们可以在CSS3 -moz-max-content(对于Firefox)和-webkit-max-content(对于Chrome，Safari)中将width设置为width，但是-ms-max-content在Internet Explorer(IE11)中似乎无法正常工作.

We can set in CSS3 -moz-max-content (for Firefox) and -webkit-max-content (for Chrome, Safari) as width, but it seems -ms-max-content is not working in Internet Explorer (IE11).

更新:这是示例代码:

.button {
    background: #d1d1d1;
    margin: 2px;
    cursor: pointer;    
    width: -moz-max-content;
    width: -webkit-max-content;
    width: -o-max-content;
    width: -ms-max-content;
}

<div>
    <div class="button"> Short t. </div>
    <div class="button"> Looooooong text </div>
    <div class="button"> Medium text </div>   
</div>

推荐答案

-max-content IE不支持它，根据可以使用.

-max-content it is not supported by IE, according to CanIuse.

因此，我通过将.button设置为display:inline-block:

So I created a fallback for IE that might help you, by setting .button to display:inline-block:

.button {
  background: #d1d1d1;
  margin: 2px;
  cursor: pointer;
  width: -moz-max-content;
  width: -webkit-max-content;
  width: -o-max-content;
  /* width: -ms-max-content;*/
}


/* fallback for IE*/

.button {
  display: inline-block;
}

<div>
  <div class="button">Short t.</div>
  <div class="button">Looooooong text</div>
  <div class="button">Medium text</div>
</div>

更新:(基于OP注释)

它正在工作，但是我不想内联显示元素.

It's working, but I don't want to display the elements inline.

这是最终答案:

.button {
  background: #d1d1d1;
  margin: 2px;
  cursor: pointer;
  width: -moz-max-content;
  width: -webkit-max-content;
  width: -o-max-content
  /* width: -ms-max-content;*/
}
/* fallback for IE*/
.width {
  width:100%
}
.button {
  display: inline-block;
}

<div>
  <div class="width">
    <div class="button">Short t.</div>
  </div>
  <div class="width">
    <div class="button">Looooooong text</div>
  </div>
  <div class="width">
    <div class="button">Medium text</div>
  </div>
</div>

如今，有一段时间，对于此问题，有一种更清洁的方法，只需将父级设置为display: flex，您甚至不需要width属性中的*-max-content值

Nowadays and for awhile there is a cleaner approach to this issue, by simply setting the parent as display: flex, and you even won't need the *-max-content value in width property

.button {
  background: #d1d1d1;
  margin: 2px;
  cursor: pointer;
}


/* the fix */

section {
  display: flex
}

<section>
  <div class="button">Short t.</div>
  <div class="button">Looooooong text</div>
  <div class="button">Medium text</div>
</section>

这篇关于IE11中的CSS3 -ms-max-content的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！