WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
在线留言 网站地图 加入收藏 设为首页
您的位置:本站首页>>网页设计制作技巧>>解决IE6中图片下方有空隙的方法,IE6下图片下方大约出现4px的空白

解决IE6中图片下方有空隙的方法,IE6下图片下方大约出现4px的空白

[ 录入者:91ctc | 时间:2013-03-17 14:25:27 | 作者: 91ctc| 来源:本站 | 浏览: 次 ]


之前听一个朋友说,一个DIV内插入一个图片后,在IE6下预览,图片下方会出现一小块空白,还请教我这是怎么回事,当时自己还感觉挺奇怪,我怎么从来没碰到过这个问题呢?后来经过仔细对比我俩的代码,才找到这其中的猫腻,那么,在此,我就总结一下这个经典问题吧。

先给出朋友写的代码:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>IE6下DIV中的图片下方出现空白</title>  
  6. <style type="text/css">  
  7. <!--  
  8. .img_bubai { width:244px; height:240px; border:1px #FF3333 solid;}  
  9. -->  
  10. </style>  
  11. </head>  
  12.   
  13. <body>  
  14. <div class="img_bubai">  
  15.     <img src="images/1.jpg" width="244" height="240" />  
  16. </div>  
  17. </body>  
  18. </html>  

上面代码,乍一看,没啥大的毛病,但是只要在IE6下预览,就会出现一个诡异的问题,预览截图:

IE6下DIV中的图片下方出现空白

哈哈,确实很诡异,通过对比我和朋友的代码,我才搞明白这里的猫腻,因为他把代码分成三行来写,也许是为了代码看起来直观吧:

IE6下DIV中的图片下方出现空白

而我的编码习惯是,1、把这个玩意写在一行的:

所以,我从来就没有遇到我朋友说的那个问题,呵呵,这不能不佩服自己的编码习惯,由于写成了一行,从才开始的时候就避免了很多麻烦。

不过,2、这么写

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2. <div class="img_bubai">  
  3.     <img src="images/1.jpg" width="244" height="240" /></div>  
  4. </body>  

最后一个</div>不换行,也不会出现空白。这也是一个解决方法。

3、或者这么写

XML/HTML Code复制内容到剪贴板
  1. <title>IE6下DIV中的图片下方出现空白</title>  
  2. <style type="text/css">  
  3. <!--  
  4. .img_bubai { width:244px; height:240px; border:1px #FF3333 solid;font-size:0px;}  
  5. -->  
  6. </style>  
  7. </head>  
  8.   
  9. <body>  
  10. <div class="img_bubai">  
  11.     <img src="images/1.jpg" width="244" height="240" />  
  12. </div>  
  13. </body>  

增加一个font-size:0px;属性,也能去掉那个空白,不过这个方法有个缺点,如果是图文混排(总不能把文字大小设为0吧),这个方法就不可取了。

4、第四个方法

XML/HTML Code复制内容到剪贴板
  1. <title>IE6下DIV中的图片下方出现空白</title>  
  2. <style type="text/css">  
  3. <!--  
  4. .img_bubai { width:244px; height:240px; border:1px #FF3333 solid;overflow:hidden;}  
  5. -->  
  6. </style>  
  7. </head>  
  8.   
  9. <body>  
  10. <div class="img_bubai">  
  11.     <img src="images/1.jpg" width="244" height="240" />  
  12. </div>  
  13. </body>  

溢出的话,直接隐藏得了,所以,这个法子也不错。

5、第五个方法

XML/HTML Code复制内容到剪贴板
  1. <title>IE6下DIV中的图片下方出现空白</title>  
  2. <style type="text/css">  
  3. <!--   
  4. .img_bubai { width:244px; height:240px; border:1px #FF3333 solid;}   
  5. .img_bubai img {vertical-align:top;}   
  6. -->  
  7. </style>  
  8. </head>  
  9.   
  10. <body>  
  11. <div class="img_bubai">  
  12.     <img src="images/1.jpg" width="244" height="240" />  
  13. </div>  
  14. </body>  

给图片设置一个垂直对齐方式我上对齐,也可以。

6、第六个方法

XML/HTML Code复制内容到剪贴板
  1. <title>IE6下DIV中的图片下方出现空白</title>  
  2. <style type="text/css">  
  3. <!--   
  4. .img_bubai { width:244px; height:240px; border:1px #FF3333 solid;}   
  5. .img_bubai img { display:block}   
  6. -->  
  7. </style>  
  8. </head>  
  9.   
  10. <body>  
  11. <div class="img_bubai">  
  12.     <img src="images/1.jpg" width="244" height="240" />  
  13. </div>  
  14. </body>  

让图片块状化显示,也不错。

7、第七个方法

XML/HTML Code复制内容到剪贴板
  1. <title>IE6下DIV中的图片下方出现空白</title>  
  2. <style type="text/css">  
  3. <!--   
  4. .img_bubai { width:244px; height:240px; border:1px #FF3333 solid;}   
  5. .img_bubai img { float:left}
  6. -->  
  7. </style>  
  8. </head>  
  9.   
  10. <body>  
  11. <div class="img_bubai">  
  12.     <img src="images/1.jpg" width="244" height="240" />  
  13. </div>  
  14. </body>  

让图片左浮动,哈哈,这个方法对图文混排的最有利,能达到排版和去空白的双重功效。本文一共介绍了七种方法,从方便上来说,写成一行的那种方法最省代码,大家可以根据自己的项目实际情况选择适合自己的方法。


关闭】【返回顶部

相关文章
{xiangguan_list}
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。联系我们
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号