How to Make Ie Support Min-Width/Max-Width CSS Properties

How to make IE support min-width / max-width CSS properties?

If what you are saying is true, IE9 would be deviating form the spec. However, I cannot duplicate your complaint. Using your example, IE9 respects min-width if width is less than 150px per this jsfiddle.

EDIT:

NOTE: Quirks Mode follow different rules and does not comply with standard CSS in any browser. If you add a doctype to the page, this should resolve the problem (add: <!DOCTYPE html>).

To expand on the issue, Quirks Mode is not standardized. There are some things that most browser implement, but new features are undefined in those defacto standards. Thus, some browsers are allowing new CSS to be used (as you have observed), but IE9 is ignoring new css values, as they have no place in Quirks Mode.

How to make IE respect max AND min-width

Ok, I found the problem.
It wasn`t in the code, my IE just automatically switched into Quirks mode.
Changed it by going in the console (F12) and changed the Document Mode to IE9!

Thank You!

IE 11 ignores min-width when using flex width

Since there seems to be no way to resolve this in IE11, I added a temporary media query to change the behavior for the specific dimensions.

In the case where we want 90% width up to 959px screen size, then 55% after 960px screen size -- I did calculation to determine that we want the <ul> element width to be 864px (960px x 90%) when screen is between 960px and 1570px (864px / 55%). So for this dimension range, I force a width and max-width of 864px.

Then for screens larger than 1571px, the flexbox 55% continues to apply again.

Using this method, I can completely ignore min-width.

@media (min-width: 960px) and (max-width: 1570px) {
  ul {    
    flex-basis: 100%;
    max-width: 864px;
    width: 864px;
  }
}

CSS min-width property is not functioning

By default, a block-level element will expand to fill as much width as possible. So its width is basically "100%" (sort of) and you're saying a maximum of 1000px, so it's expanding to the maximum of 1000px. The minimum width is still being achieved (it's at least 500px). Try setting display: inline-block on the element and see if that helps you out any. This should make it only expand as far as its content while still paying attention to the minimum and maximum widths. You may have to add a breaker <br /> after to make the rest of your content adapts to it being inline.

How to make css max width in IE6 and 7?

The max-height property is supported in IE7: http://www.w3schools.com/cssref/pr_dim_max-height.asp , and you can use IE7 test it by this link.

IE6 and earlier versions do not support the max-height property. But you can use CSS to hack it:

img {  
  max-height: 800px;  
  _height:expression(this.scrollHeight > 800 ? "800px" : "auto"); /* sets max-height for IE6 */  
  max-width: 600px;  
  _width:expression(this.scrollWidth > 600 ? "600px" : "auto"); /* sets max-width for IE6 */  
}

2.1 Solve it by jQuery:

if($.browser.msie&&($.browser.version == "6.0")&&!$.support.style){  
    $("img").each(function(){  
        if($(this)[0].scrollHeight>800)  
        $(this).css({"height":"800px","overflow":"hidden"});  
    });
}

2012.11.27 update:

img{
    min-height:800px;height:auto !important;height:800px;
    min-width:600px;width:auto !important;width:600px;
}

Issue with CSS min-width and max-width

A div takes by default 100% of its parent's width. So it will take the max-width.

To accomplish what you want, float them and clear both sides:

li {

  display: block;

  float: left;

  clear: both;

  border: 1px solid lightCoral;

  list-style: none;

  padding: 4px 6px;

  margin: 5px;

  min-width: 120px;

  max-width: 250px;

}

li:last-child {

  width: 200px;

}

<ul>

  <li>first item</li>

  <li>second item very long content</li>

  <li>third item</li>

  <li>This is 200px wide</li>

</ul>

max-width not working for IE 11

I think your problem is not coming from max-width but from main element...

The main element is not fully supported by IE11 (source).

2 solutions :

Change your <main> element to a <div>. Demo : http://jsfiddle.net/z4s01yxz/2/
Add main { display: block; } to your CSS. Demo : http://jsfiddle.net/z4s01yxz/1/

How to combine a min-width with a max-width that equals to 100% if needed in CSS?

Its seems like clamp(MIN, VAL, MAX) is your answer in this case.
The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value. The clamp() function can be used anywhere a length, frequency, angle, time, percentage, number, or integer is allowed.

clamp(MIN, VAL, MAX) is resolved as max()(MIN, min()(VAL, MAX))

https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()

How to Make Ie Support Min-Width/Max-Width CSS Properties