当前位置:园子博客 » 网站应用 » 网页设计中如何避免 IE 浏览器图片下方的空隙

网页设计中如何避免 IE 浏览器图片下方的空隙

3月 4th, 2010 | Filed under 网站应用 | 共有8,510次浏览

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 浏览器图片下方的空隙,我们在页面排版的时候,一定要多尝试,不同的属性可能会有意想不到的解决方案哦!

  1. 茉莉
    10月 19th, 201016:42

    三种方法我都用了怎么还不行呢,img元素后面的空格怎么去掉,还有这个text文本在哪呢

  2. www.codigg.com
    4月 13th, 201010:33

    续:网页设计中如何避免 IE 浏览器图片下方的空隙
    http://www.codigg.com/2010/04/html-img-bottom-border/

  3. www.codigg.com
    4月 13th, 201010:02

    汗啊,其实是你img元素下面有一个空白符,即(text文本),而默认text文本会有一定高度。

    其实最简单的方法是去掉你img元素后面的空格,这样还不需要这些样式,也不需要考虑这些样式兼容问题。。。。

    • 园子
      4月 13th, 201017:04

      @www.codigg.com
      这样代码在套用了源格式后会还原的。

  4. 石头
    3月 18th, 201011:27

    IE6的问题确实比较多,专门为IE6写CSS是经常的事

  5. Bee君
    3月 13th, 201016:13

    希望标准会统一吧

  6. A.shun
    3月 12th, 201021:42

    我已经决定忽略IE的体验了

    • 园子
      3月 13th, 201009:37

      @A.shun
      呵呵 自己做东西还可以 有时候客户那边没法交待哈。

  7. CT
    3月 11th, 201016:04

    长一识,Thx for share

  8. 蓝色光标
    3月 10th, 201010:31

    哦,设为块级。可以这样的,。。学习了。

  9. reizhi
    3月 9th, 201018:39

    围观一下,没更新呀

  10. 征途牛仔
    3月 9th, 201017:49

    牛仔 回来啦!呵呵!继续支持!

  11. googlr
    3月 8th, 201018:00

    留一个脚印 祝福

  12. AnQ
    3月 8th, 201017:00

    很不错,现在对于IE6已经不太关注了,IE7以上的版本应该能好些

  13. huangjun
    3月 8th, 201015:47

    嗯,应该多想解决办法,而不是一味的抱怨ie版本。

  14. timberland
    3月 8th, 201014:20

    不错的博文~期待更精彩的~嘿嘿~谢谢分享~

  15. 疾风
    3月 8th, 201011:43

    IE就是杯具~

  16. 妮裳神话
    3月 8th, 201010:44

    嘿嘿!我回来了哦!今天三八节!嘿嘿!
    杂的这么久没更新了呢!我都更新了哦,呵呵

  17. 驸马战机
    3月 7th, 201010:31

    园子你的首页菜单下横幅adsense广告是手动在页面插入?

  18. reizhi
    3月 6th, 201013:55

    围观一下技术

  19. 晓龙在线
    3月 5th, 201023:07

    学习了,园子的教程不错,很通俗易懂

  20. 自由人
    3月 5th, 201020:55

    IE真让人烦透了。。。哎,还有这么多bug

  21. 就要发
    3月 5th, 201017:20

    恩,回忆,永远都回不去的记忆…

  22. 安庆法律人
    3月 5th, 201016:57

    以前还关注这些技术,现在懒了,有现成的,自己实在懒的动手。

  23. 原子博客
    3月 5th, 201014:56

    哈哈,没想到我们博客的名称这么相近。。。

  24. 原子博客
    3月 5th, 201014:56

    还是ie6经典啊。。。

  25. 三七八蛋
    3月 5th, 201013:47

    这个细节要注意啊。

  26. 超人
    3月 5th, 201009:10

    取经了。。 园子是做美工的?

  27. 秦大少
    3月 4th, 201022:39

    多谢指教,学习了!

  28. 路大侠
    3月 4th, 201022:20

    IE6即将成为传说~

  29. 仁心博客
    3月 4th, 201021:29

    来学习一下……

  30. lty
    3月 4th, 201021:10

    好教程哦,来看看。

  31. GEZ鸽子
    3月 4th, 201018:15

    一起封杀IE6!

  32. 北街
    3月 4th, 201013:43

    IE6和IE7逐渐会被淘汰的~

  33. 逅客北极
    3月 4th, 201013:15

    现在用谷歌的浏览器,感觉搜索起来很方便。

  34. 白雪山
    3月 4th, 201012:59

    以前还真没留意过这个,不过我现在已经换个win7 用的是IE8了

  35. 大敏
    3月 4th, 201012:51

    学习了。不过外国很多已经开始禁止IE6了!

  36. 记忆盒子
    3月 4th, 201012:50

    我还没发现这个细微的地方,看来博主是一个十分细心的人!

  37. 乘风归来兮
    3月 4th, 201011:44

    忒细了,基本没有关注过这些,留存学习

  38. 冷轩信
    3月 4th, 201010:27

    学习下,

  39. 丕子
    3月 4th, 201009:57

    多么细致的技术,记住了

  40. 韩寒
    3月 4th, 201009:55

    学习了,谢谢,谢谢继续分享

您必须在 登录 后才能发布评论.