How to make css max width in IE6 and 7?

Question

I use this css code in my website:

img {
  max-height: 800px;
  max-width: 600px;
}

Unfortunately, it doesn't work with IE 6 and 7. How can I solve it?

Thanks in advance.

Answer 1

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

2. 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;
}

Answer 2

You can get get min and max width/height to work in older IE: http://javascript.about.com/library/blwidth.htm