昨天在重构一个外贸购物的网站,在用UL标签的时候发现在IE8下是正常显示,但是代码在IE6,IE7, Firefox,谷歌浏览器,Opera都下不正常,下面是测试用UL做的的纵向图片菜单效果,图片下方会有间距,如下代码:
<!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=gb2312″ />
<meta name=”author” content=”www.onepound.cn” />
<title>外贸购物</title>
<style type=”text/css”>
body{background:#000;}
img{border:none;}
ul{margin:0;padding:0;list-style-type:none;}
</style>
</head>
<body>
<ul>
<li><img alt=”外贸建站专家” src=”https://www.onepound.cn/images/ownlogo.gif” /></li>
<li><img alt=”外贸建站专家” src=”https://www.onepound.cn/images/ownlogo.gif” /></li>
<li><img alt=”外贸建站专家” src=”https://www.onepound.cn/images/ownlogo.gif” /></li>
</ul>
</body>
</html>
经过反复的尝试只需要定义一下LI中的IMG就可以解决问题了了
加入CSS为 ul li img{vertical-align:top;}