IE11 中的 CSS3 -ms-max-content答案

【问题标题】：CSS3 -ms-max-content in IE11IE11 中的 CSS3 -ms-max-content
【发布时间】：2014-05-15 02:09:01
【问题描述】：

我们可以在 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>

【问题讨论】：

也许一些代码会很好，这样人们可以帮助你。
问题已更新为代码示例。谢谢。

标签： html css internet-explorer internet-explorer-11

【解决方案1】：

-max-contentIE不支持，根据CanIuse.

因此，我通过将 .button 设置为 display:inline-block，为 IE 创建了一个可能对您有所帮助的后备方案：

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

新更新

现在和一段时间内有一种更简洁的方法来解决这个问题，只需将父级设置为display: flex，您甚至不需要width 属性中的*-max-content 值

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

【讨论】：

如果内容已经内联，并且内容显示在不同的高度怎么办？
请提供小提琴
这个想法是让 div 适合里面的内容，而不是扩展到最大尺寸。即使使用 flexbox，您仍然需要 max-content 来做到这一点。 jsfiddle.net/k7643o5d/3
为此您需要在父级中添加align-items: flex-start，因为默认情况下它是align-items: stretch

【解决方案2】：

对于文本元素，我尝试了word-break: keep-all;，它对我有用。

【讨论】：

【解决方案3】：

这适用于 IE11、Chrome 和 Firefox

而不是

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

我用过

width: auto;
white-space: nowrap;

【讨论】：

这节省了一天的时间。我在 Safari 中遇到最大内容问题。这解决了它。谢谢！

【解决方案4】：

为 flex div 工作。我用来改变父母的高度。

.div-parent {
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;
  position: fixed;
  top: -70px;
  bottom: 0;
  right: 0;
  left:20px;
  height: 70px;
  opacity: 0;
}

.div-children{
  display:block;
  padding-left:15px;
  padding-right:15px;
  padding-top:0px;
  padding-bottom:0px;
  width: 100%;
}

$("<div class='div-children'>Content...</>").appendTo(".div-parent");
var hd=70; 
while($('.div-parent')[0].scrollHeight > $('.div-parent')[0].clientHeight){
    hd=hd+1;
    $('.div-parent').css("height",hd+"px");
}   
$('.div-parent').css("top","0");
$('.div-parent').css("opacity","1");

【讨论】：