Question

css控制图片最大尺寸时在IE8中布局变形(被撑大) ,请高手指教~!

css代码如下:
#article{float:left;}
#article img {
max-width: 270px;
max-height: 270px;
}
* html #article img {
width: expression(this.width > 300 && this.width > this.height ? 300 : auto);
height: expression(this.height > 300 ? 300 : auto);
}
html代码:
<div align="center" id="BArticle"><img src="../../img/2.jpg" /></div>
在IE8中,如果图片本身宽度大于高度,显示出来的图片会按要求小于300,但是会占用图片本身宽度的空间,就是,如果左边还有图片,会被撑到外面去.
但是在IE7和火狐中是正常的

请高手指教~!
html中id名输错了,修改如下,
<div align="center" id="article"><img src="../../img/2.jpg" /></div>

Answer 1

这是ie8的一个“毛病”。经过试验，通过定义父对象宽度的方法可以解决这个问题。

另外建议你用标准css来写网页。ie8已经不支持expression了，这就告诉我们——微软也在开放、进步。

参考资料中提到是用js来搞定。

Answer 2

html #article img {
width: expression(this.width > 300 && this.width > this.height ? 300 : auto);
height: expression(this.height > 300 ? 300 : auto);
}
我觉得设置宽度和高度应该分开设置的好，这个你可以参考下
#article img {
max-width:400px; width:expression(width>400?"400px":width+"px");max-width: 400px; overflow:hidden;
max-height:400px; width:expression(height>400?"400px":height+"px");max-height: 400px; overflow:hidden;
}