<!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" />
<meta name="keywords" content="网站关键字" />
<meta name="description" content="网站描述" />
<meta name="Author" content="庞淦" />
<meta content="all" name="robots" />
<title>网站标题</title>
<style type="text/css">
.img_txt{170px;height:140px;background:#E9E9E9;border:1px solid #E9E9E9;float:left;}
.img_txt li{line-height:24px;text-align:center;font-weight:bold;}
.img_txt li a{color:#2765a9}
.img_txt li a img{display:block;166px;height:111px;border:2px solid white;}
.img_txt li a:hover img{border:2px solid #ff8400;}
</style>
</head>
<body>
<ul class="img_txt">
<li><a href="#"><img src="../Style/cut/news_10.png" width="166" height="111" alt="共生体基因组计划" /></a></li>
<li><a href="#">共生体基因组计划</a></li>
</ul>
</body>
</html>
三张效果图浏览器以次为:IE6-IE7-IE8|FF
实现这个效果的代码够简洁了吧~为什么IE6 IE7效果会这样呢?
经过细研究发现给第一个LI加个overflow:hidden;可以解决这个问题,但并不完美,IE6下无效.
最终给第一次LI加上宽高即可解决IE6 IE7出现的此问题!
其实我们实际操作中遇到的很多类似问题,都是我们为了精简代码优化加载从而无心中省略了写宽高从而导致这些怪问题.
IE7暂且不说,IE6在国内市场占有率还是有一定的份量.我们必须对其做特殊处理!需对主流浏览器渲染效果进行理解从而避免类似问题的发生!