Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 543
István Avatar asked Apr 03 '14 10:04

István


People also ask

Is CSS3 fully supported by all browsers?

CSS3 Features Supported by All Modern Browsers.

How do I add specific CSS to Internet Explorer?

IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 ( \9 ) at the end before the semicolon. IE7 or below: add an asterisk ( * ) before the CSS property. IE6: add an underscore ( _ ) before the property.


Video Answer


3 Answers

This works 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; 
like image 177
Hannah Avatar answered Sep 19 '22 17:09

Hannah


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

NEW UPDATE

Nowadays and for awhile there is a cleaner approach to this issue, by simply setting the parent as display: flex, and you even won't need the *-max-content value in width property

.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>
like image 32
dippas Avatar answered Sep 18 '22 17:09

dippas


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

like image 42
yue Avatar answered Sep 20 '22 17:09

yue