网页设计中如何避免 IE 浏览器图片下方的空隙
IE6 是让众多设计师哭笑不得的一种浏览器，在页面排版的时候，我们会发现在 IE6 的图片下方常常会莫名其妙的多出几像素的空隙（经测试IE7也有此问题），本文就与大家分享下如何避免 IE 浏览器图片下方的空隙。
先来看下图片在不同浏览器中的展示效果：
图片在不同浏览器中的显示效果对比
上面图片示例的源码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!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 name="description" content="园子博客（www.yzznl.cn） - 关注互联网和WordPress的IT博客" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页设计中如何避免 IE 浏览器图片下方的空隙</title>
<style type="text/css">
<!--
* {margin: 0px;padding: 0px;}
body {padding: 30px;}
.logo {background-color: #9C0; border: 1px solid #F00; width: 270px;}
-->
</style>
</head>
<body>
<div class="logo"> <img src="http://www.baidu.com/img/baidu_logo.gif" /> </div>
</body>
</html> |
要解决IE 浏览器图片下方的空隙，园子总结了三种方法。
1.最简单的也是园子推荐的一种方法，可以定义 img 标签的属性为：display:block；
2.还有种方法是可以设置图片的父容器字体大小为零，即：font-size:0；
3.最后一种方法，可以定义 img 标签的 vertical-align 属性值为：vertical-align:top | bottom |middle |text-bottom; 中的任意一种即可。
经过简单的定义就可以完全避免网页设计中 IE 浏览器图片下方的空隙，我们在页面排版的时候，一定要多尝试，不同的属性可能会有意想不到的解决方案哦！
