无意中翻到以前做过的一个效果, 项目中使用过,经测试IE6 IE7 Firefox2 Firefox3 opera9 Safari中均能通过…

CSS代码:

   1: ul li {list-style:none;display:table-cellwidth:200px;height:100px;background:#f8f8f8;border:1px solid #777;text-align:center;vertical-align:middle;}
   2: li img {max-width:100px;max-height:80px;overflow:hidden;}
   3:  
   4: /*下面这段代码IE下执行 实现图片的垂直水平居中*/
   5: ul li {float:left;}
   6: li em {display:inline-block;width:0;height:100%;vertical-align:middle;}
   7: li span {display:inline-block;width:100%;text-align:center;vertical-align:middle;}
   8:  
   9: /*下面这段代码IE6下执行 实现IE6下面的图片自动缩放*/
  10: li img {display:block;width:expression(this.width >100 && this.height < this.width ? 100: true);height:expression(this.height >80 && this.height > this.width ? 80: true);}

XHTML代码: 

   1: <ul>
   2:  <li><em></em><span><img src="http://www.citk.net/photo/uploadcitk_photo/200606/20060621135205971.jpg" alt="" /></span></li>
   3:  <li><em></em><span><img src="http://www.blueidea.com/img/common/logo.gif" alt="" /></span></li>
   4:  <li><em></em><span><img src="http://www.google.cn/images/nav_logo.png" alt="" /></span></li>
   5:  <li><em></em><span><img src="http://autopic.sohu.com/auto_images/piclib/zone/attachments/day_061027/Leah_Dizon_red_01_WUrRvidk06l4.jpg" alt="" /></span></li>
   6: </ul>

重点是用到了IE下的expression, 这个很占资源, 建议少用为妙.其实还有很多方法可以实现,如font-size等.