Html IE11 中的 CSS3 -ms-max-content
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22834379/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 -ms-max-content in IE11
提问by István
We can set in CSS3 -moz-max-content(for Firefox) and -webkit-max-content(for Chrome, Safari) as width, but it seems -ms-max-contentis not working in Internet Explorer (IE11).
我们可以在 CSS3 -moz-max-content（对于 Firefox）和-webkit-max-content（对于 Chrome、Safari）中设置为width，但它似乎-ms-max-content不适用于 Internet Explorer（IE11）。
Update:Here is a sample code:
更新：这是一个示例代码：
.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>回答by dippas
-max-contentit is not supported by IE, according to CanIuse.
-max-content根据CanIuse 的说法，它不受 IE 支持。
So I created a fallback for IE that might help you, by setting .buttonto display:inline-block:
所以，我创建了一个后备的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>UPDATE:
更新：
Based on OP comment:
基于 OP 评论：
It's working, but I don't want to display the elements inline.
它正在工作，但我不想内联显示元素。
here is the final answer:
这是最终答案：
.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>回答by Sandra Alvarez
This works on IE11, Chrome and Firefox
这适用于 IE11、Chrome 和 Firefox
instead of
代替
width: -moz-max-content;
width: -webkit-max-content;
width: -o-max-content;
width: -ms-max-content;
I used
我用了
width: auto;
white-space: nowrap;
回答by yue
For text elements I tried word-break: keep-all;and it worked for me.
对于我尝试过的文本元素word-break: keep-all;，它对我有用。
回答by Sergii Dobrovolskyi
Work for flex div. I use to change the height of the parent.
为 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");
