web-dev-qa-db-ja.com

CSS3 -ms-max-content in IE11

CSS3で設定できます-moz-max-content（Firefoxの場合）および-webkit-max-content（Chrome、Safariの場合）はwidthと同じですが、-ms-max-contentはInternet Explorer（IE11）では機能しません。

pdate：サンプルコードは次のとおりです。

.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>
htmlcssinternet-explorerinternet-explorer-11
15
István

-max-contentCanIuse によると、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>

UPDATE：

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>
15
dippas

これはIE11、Chrome、Firefoxで私のために働いた

の代わりに

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

使った

width: auto;
white-space: nowrap;
4
Sandra Alvarez

テキスト要素について私はWord-break: keep-all;そしてそれは私のために働いた。

1
yue

フレックス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");
0
Sergii Dobrovolskyi