web-dev-qa-db-fra.com

CSS3 -ms-max-content dans IE11

Nous pouvons définir dans CSS3 -moz-max-content (pour Firefox) et -webkit-max-content (pour Chrome, Safari) en tant que width, mais il semble -ms-max-content ne fonctionne pas dans Internet Explorer (IE11).

pdate: Voici un exemple de 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>
htmlcssinternet-explorerinternet-explorer-11
15
István

-max-content il n'est pas pris en charge par IE, selon CanIuse .

J'ai donc créé un repli pour IE qui pourrait vous aider, en définissant .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>

MISE À JOUR:

Basé sur le commentaire OP:

Cela fonctionne, mais je ne veux pas afficher les éléments en ligne.

voici la réponse finale:

.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

Cela a fonctionné pour moi sur IE11, Chrome et Firefox

au lieu de

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

J'ai utilisé

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

Pour les éléments de texte, j'ai essayé Word-break: keep-all; et cela a fonctionné pour moi.

1
yue

Travailler pour flex div. J'utilise pour changer la hauteur du parent.

.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