IE 中实现 max-width 解决文章中大图片撑大布局的问题－法一

作者：vkvi 来源：ITPOW（原创）日期：2010-1-27

IE 中实现 max-width 解决文章中大图片撑大布局的问题－法一
IE 中实现 max-width 解决文章中大图片撑大布局的问题－法二

在 Firefox、Chrome、Opera 等浏览器中，都支持 max-width，这样我们给文章中的图片指定了 max-width 后：若图片大小超过 max-width，则自动缩小到 max-width；若没有超过 max-width，则保持原大小不动。这样既保证了大图片不会撑大布局，又保证了小图片不会被拉大变得畸形。

但 IE 6 中不支持 max-width 这个属性，解决办法是用 JavaScript 或 CSS 的 expression（仅 IE 支持）。用 JavaScript 稍显麻烦，用 CSS 的 expression 实际上也是执行一段 JavaScript 代码，但使用起来较方便。

CSS 代码

.content img
{
    max-width:300px;
    _width:expression((this.offsetWidth > 300) ? "300px" : this.offsetWidth + "px" );
    /*_width: expression(Math.min(this.offsetWidth, 300) + "px");*/
}

HTML 代码

上面 CSS 中，第一句是标准支持的，第二句和第三句是 IE 支持的，第二句和第三句效果是一样的，只是使用的语句不同罢了。

要注意，我看到有人使用另外一种写法：_width:expression((this.offsetWidth > 300) ? "300px" : "auto" );，使用的是 auto，我不知道其他人预览时如何，只是这种写法导致我的浏览器当掉了。

重要说明

此法虽然使用方便，但有一个最大的问题，就是判断不准确，有时候图片明明很大，它却误判为几十像素，要刷新一下才能正确判断。也有少数情况，将图片宽度判断大了。