IE11中的CSS3 -ms-max-content

Question

我们可以设置CSS3 -moz-max-content(适用于Firefox)和-webkit-max-content(适用于Chrome,Safari)width,但似乎-ms-max-content无法在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>

Answer 1

-max-content根据CanIuse的说法,IE不支持它.

所以我创建了一个可以帮助你的IE回退,设置.button为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评论:

它工作正常,但我不想显示内联元素.

这是最后的答案:

.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>

Answer 2

这对我来说适用于IE11，Chrome和Firefox

代替

width: -moz-max-content;
width: -webkit-max-content;
width: -o-max-content;
width: -ms-max-content;

我用了

width: auto;
white-space: nowrap;