max-width and max-height solution in Internet Expl

问题:

In this page:

http://tinyurl.com/widthheight

I am using max-width and max-height.

Works fine for Firefox, Chrome, Opera, Epiphany, ect but NOT Internet Explorer.

.

What solution do you recommend in this case ?

I have to limit max-width of 180px and max-height of 180px.

回答1:

Try to add this for IE max-width:

.maxwidth {
    zoom:1;
    maxwidth:expression(
        function(t){
            var w = t.parentNode.scrollWidth;
            if (w != t.w) {
                t.w = w;
                var max = parseInt(t.currentStyle['max-width'], 10);
                t.style.width = 'auto';
                if (t.scrollWidth > max) {
                    t.style.width = max;
                }
            }
        }(this)
    );
}

回答2:

have a look at this hack - I dont think IE supports max-width properly

http://www.svendtofte.com/code/max_width_in_ie/

回答3:

Check out this resource: Max width workaround for IE 6+. Note that it won't work for users with Javascript disabled.

回答4:

The aforementioned solutions will work to implement max-width/height in IE, but just wanted to mention that if performance is an issue, you might want to look into generating actual thumbnail images instead of relying on HTML/CSS sizing.

Thumbnails would result in a smaller filesize, and you could potentially crop them to improve your visual direction. It would also get around the need for JavaScript and/or the negative performance implications of CSS Expressions.

Might not be feasible from a maintenance standpoint, but I figured I would mention it...