div中图片（大图）居中显示：table-cell；max-width关于i8 bug 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
.Pic{width:50px;height:50px;display:table;table-layout:fixed;}
.Pic div{display:table-cell;width:50px;height:50px;background:#ccc;vertical-align:middle;}
.Pic div img{max-width:50px;max-height:50px;}
</style>
</head>
<body>
<div class="Pic"><div><img src="http://www.leaoo.com/images/logo.gif" alt="Leaoo" /></div></div>
我的解决方法，不过要多加个div标签。。。。
</body>
</html>

i8是没有问题了

在针对ie7

.Pic{width:50px;height:50px;display:table;table-layout:fixed;  *display:block; *line-height:50px; }
*display:block; *line-height:50px;
欧克~~~

　但是ie6下不支持max-width和max-height；

其实使用css也可以搞定，但是css中要加入expression，这样对css来说不太好，影响css的加载。所以还是用js实现吧

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
 if($.browser.msie && $.browser.version == "6.0"){

        $(document).ready(function(){

            $(".d_m").find("img").bind("load", function(){

               this.clientWidth > 50? $(this).width(50) : "auto" ;

            });

        });

     }
</script>

　　嗯 好了~~~

posted @ 2012-03-08 12:11  laugh  阅读(1801)  评论(0)  编辑  收藏  举报