加载中…
浏览器中图片下方空白bug
(2007-11-26 18:52:07)
标签：
浏览器图片bug |
分类： Ajax |
http://116.img.pp.sohu.com/images/blog/2007/5/6/20/16/112f94a6eb2.gif这种情况想着大家都遇到过，一般人认识它只是ie的BUG，其实不然，在ie6.7.ff.opera中都有这种情况。怎么，不信？？。那你就在我上面说的这几种浏览器中运行一下看看效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=gb2312" />
<title>浏览器中图片下方空白bug</title>
</head>
<body>
<div style="background:red">
</div>
</body>
</html>
这次相信了吧？？哈哈，经过多次实验找到了以下几种可以兼容以上几种浏览器的方法：
1.img{display:block}
2.删掉div与img之间的空格成这样:
<div style="background:red"><img
src="http://js.pp.sohu.com/ppp/blog/styles/images/editor/simg.gif"
alt="图片" /></div>
3.img{vertical-align:top 或者 middle 或者
还有两种方法:
1.vertical-align:text-top
2.vertical-align:text-bottom
这两种方法在ie6.7.opera里是可以作到的，不过在FF中的效果按照先后顺序是这样的
http://118.img.pp.sohu.com/images/blog/2007/5/6/20/24/112f95085fe.jpg
http://115.img.pp.sohu.com/images/blog/2007/5/6/20/27/112f949fdc4.gif
建议：
img{display:block}这种方法是大家常用的，但是我感觉这样不好，本来img是内联元素可以一行排上好几个，display:block后就成了块级元素，块级元素后面的东西是要换行显示的，那要是在一个容器内放几个图片想让它们一行排的话就是就得再加代码。多出不少的代码。
删掉空格的方法虽然是减小了字节（一个空格字节非常小可以忽略）。但是不利于代码的修改。让别人改你代码的时候会使其找不到北。自己改的时候也会看着很累。
我推荐的方法是img{vertical-align:top;}大家都知道的一个容器内的垂直居中的默认值为顶对齐，图片这么设置不会影响其它的元素。不信？？你可以把我上面发的代码div的高度设的大点，看看图片是怎么排的。:)
喜欢
0
赠金笔