`
charrysong
  • 浏览: 50273 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

如何解决IE6 img与元素边界有空隙问题

阅读更多

很多人在在web开发中,经常会遇到图片和临界元素之间有间隔,多发生在ie6下!

如以下两种情况1.未加效果在ie6下会出现这种情况!;2、加了display:block处理后的效果;

1、代码如下:

Html代码复制代码运行
  1. <style type="text/css">  
  2. div{width:205px;height:121px;border:1px solid #ddd;padding:5px;}   
  3. img{width:205px;height:121px;}   
  4. </style>  
  5. <div><IMG src="http://www.ok22.org/images/TT.jpg"></div>  
  6. <div><IMG src="http://www.ok22.org/images/TT.jpg"></div>  
  7. <div><IMG src="http://www.ok22.org/images/TT.jpg"></div>  
	<style type="text/css">
	div{width:205px;height:121px;border:1px solid #ddd;padding:5px;}
	img{width:205px;height:121px;}
	</style>
	<div></div>
	<div></div>
	<div></div>

2、代码如下:

Html代码复制代码运行
  1. <style type="text/css">  
  2. div{width:205px;height:121px;border:1px solid #ddd;padding:5px;}   
  3. img{width:205px;height:121px;display:block;}   
  4. </style>  
  5. <div><IMG src="http://www.ok22.org/images/TT.jpg"></div>  
  6. <div><IMG src="http://www.ok22.org/images/TT.jpg"></div>  
  7. <div><IMG src="http://www.ok22.org/images/TT.jpg"></div>  
	<style type="text/css">
	div{width:205px;height:121px;border:1px solid #ddd;padding:5px;}
	img{width:205px;height:121px;display:block;}
	</style>
	<div></div>
	<div></div>
	<div></div>

这时候应先检查排版,如果仍然不能解决,可考虑以下方法:

第一,给图片img标签display:block。
img{display:block}
 
第二,定义容器里的字体大小为0。

div {
width:110px;
border:1px solid #000000;
font-size:0
}

第三,定义图片img标签vertical-align:bottom,vertical-align:middle,vertical-align:top。

img{vertical-align:bottom}

其他还有把图片下边距设为负值和改写HTML标签的排列。我觉得前三种就完全可以解决了。

造成图片在IE下与容器下边界有空隙的

在网上搜了一下,发现old9说的

图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关,不一定是 5px),所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li,其他的block元素中包含img也会有这个现象。

至于这里的HTML属性align="center"(对于图片浏览器会处理成align="middle"),就相当于vertical-align:middle; 所以道理也是一样的,只要vertical-align不取baseline,这个空隙就消失了

相关评论

1.ie的显示有几种模式,在html文档的开始部分声明
如果声明为strict模式,ie以w3c的方式显示文档,而w3c的标准里面默认是一个inline的标签,除非自己显式的声明为 block

2.那个空隙是ie针对盒模型默认的line-height和font-size. 给img desplay:block;虽然能解决问题,但没从结构上来考虑.可谓治标不治本.

转自:http://www.ok22.org/art_detail.aspx?id=173

分享到:
评论

相关推荐

    img图片在ie下有有空隙

    ### img图片在IE下出现空隙问题解析及解决方案 #### 问题背景 在网页开发过程中,经常遇到不同浏览器之间的兼容性问题。其中,一个常见的问题是IE(Internet Explorer)浏览器下的图片显示异常,尤其是在图片周围...

    img与容器下边界的空隙(缝隙) 的解决方法

    在网页设计中,有时会遇到一个常见的问题,即图片(img)与包含它的容器(通常是div)之间的下边界出现空隙或缝隙。特别是在Internet Explorer 7(IE7)浏览器中,这种现象尤为突出,而在更新的浏览器如IE8中则不太...

    解决IE6下PNG图片背景色不透明问题的方法

    在互联网的早期,Internet ...因此,了解如何解决IE6的PNG透明问题仍然是一个有价值的知识点,尤其对于需要维护老网站或确保全面兼容性的开发者来说。通过上述方法,我们可以让网站在IE6上也能呈现出预期的视觉效果。

    实现ie6的png图片透明的2种方法

    ### 实现IE6中的PNG图片透明的两种方法 ...以上两种方法均可有效解决IE6中PNG图片透明度的问题,开发者可以根据实际需求选择合适的方法进行实现。尽管IE6已经成为历史,但这些技巧在处理遗留项目时仍然非常有用。

    解决ie6 PNG透明问题——两种方法都好用哦

    在网页设计与开发领域中,Internet Explorer 6(简称 IE6)因其对部分CSS特性和图像处理的支持不足而成为不少开发者头疼的问题之一,尤其是PNG透明效果的支持。本文将详细介绍两种有效解决IE6下PNG图片透明显示问题...

    IE浏览器下的图片空隙间距BUG和解决办法.pdf

    这个问题主要出现在IE浏览器的旧版本中,特别是IE6和IE7,而在现代浏览器如Firefox、Chrome、Safari等中则很少遇到。这个BUG表现为在设置好图片的margin和padding为0的情况下,图片之间仍然会出现不必要的间距。 ...

    解决ie img标签内存泄漏的问题

    在IE浏览器中,由于其...总结,解决IE img标签内存泄漏的问题,关键在于正确地清理不再使用的img元素,以及确保它们与内存中的资源断开关联。通过上述方法,可以有效地防止内存泄漏,提高应用程序的性能和稳定性。

    解决ie6下png格式的兼容

    总之,"解决ie6下png格式的兼容"是一个历史悠久但仍然具有一定现实意义的话题,因为全球仍有一部分用户在使用旧版浏览器。通过使用像DD_belatedPNG.js这样的工具,开发者可以为这些用户提供更好的浏览体验,同时保持...

    DD_belatedPNG.js解决IE6浏览器下的PNG透明图片显示问题

    为了解决这个问题,开发者们创造了一种名为“DD_belatedPNG”的JavaScript库,它通过JavaScript模拟了PNG透明效果,从而使得在IE6上可以正常显示这些图片。 DD_belatedPNG的核心原理是利用VML(Vector Markup ...

    IE6-IE9兼容性问题列表及解决办法

    # IE6-IE9兼容性问题列表及解决办法 ## 概述 随着技术的发展,浏览器不断迭代更新,为了确保网站能在不同的浏览器版本下正常显示和运行,了解并解决兼容性问题是前端开发者的重要任务之一。从IE6到IE9,微软的...

    解决ie6下透明图片不透明问题

    标题提到的"解决ie6下透明图片不透明问题"直指一个历史悠久且颇具特色的难题:Internet Explorer 6(简称IE6)对PNG透明度的支持。在IE6之前,GIF格式常用于实现网页上的透明效果,但其色彩有限,而PNG格式则提供了...

    ie6中png透明解决方案 js

    以上两种方法都可以有效解决IE6下PNG图片透明度的问题,但在实际应用中,考虑到IE6的市场份额逐渐减少,开发者也可能选择仅对现代浏览器提供PNG透明效果,而让IE6用户看到不透明的图片。 这个压缩包中的"ie6中png...

    完美解决png在ie6兼容问题完整示例

    为了解决这个问题,开发者通常会利用JavaScript或者特定的CSS技巧来实现PNG在IE6下的正常显示。以下是一个详细的知识点讲解: 1. **PNG图像格式**:PNG(Portable Network Graphics)是一种无损压缩的位图格式,...

    IE6_PNG透明终极解决办法

    2. **JavaScript库**:有一些JavaScript库,如DD_belatedPNG,专门为了解决IE6的PNG透明问题而设计。这些库通过JavaScript动态修改DOM元素,模拟透明效果。 3. **服务器端脚本**:在服务器端,可以使用PHP、ASP.NET...

    PNG图片IE6下面解决最好的方法

    有一些JavaScript库如DD_belatedPNG,专门解决IE6的PNG透明问题。它们通过添加额外的DOM元素和CSS样式来模拟透明效果。引入库后,只需调用相应函数即可。 五、渐进增强与优雅降级策略 在开发过程中,可以采用渐进...

    IE6图片元素img下出现多余空白的问题

    遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”,根据原因的不同要用不同的解决方法,这里把解决直接把解决image图片布局下边的...

    完美解决IE6不支持hover的方法

    IE6以及更低版本的浏览器对“:hover”的支持不理想,对于类似的“p:hover”、“img:hover”、“#header:hover”...,今天给大家介绍一种新的方法,可以完美解决IE6不支持hover的情况,用法很简单,将下载后的“css...

Global site tag (gtag.js) - Google Analytics