CSS3 -ms-max-content in IE11

问题

We can set in CSS3 -moz-max-content (for Firefox) and -webkit-max-content (for Chrome, Safari) as width, but it seems -ms-max-content is not working in 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>

回答1:

-max-content it is not supported by IE, according to CanIuse.

So I created a fallback for IE that might help you, by setting .button to 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:

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>

回答2:

This worked for me on IE11, Chrome, and 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;

回答3:

For text elements I tried word-break: keep-all; and it worked for me.

来源：https://stackoverflow.com/questions/22834379/css3-ms-max-content-in-ie11

标签

css

css3

internet-explorer-11