`
bleach0608
  • 浏览: 62056 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

IE中img多出5px的空白解决4种方法

    博客分类:
  • CSS
阅读更多

 li 元素中包含 a img 元素的时候会比较麻烦,需要注意,当然,问题还是一如既往的出现在 IE 下。以下为其中一例

<ul>
    <li><a href="#"><img src="temp.jpg" /></a></li>
    <li><a href="#"><img src="temp.jpg" /></a></li>
    <li><a href="#"><img src="temp.jpg" /></a></li>
    <li><a href="#"><img src="temp.jpg" /></a></li>
</ul>


ul{width: 280px;}
ul li{display:block;height:57px;}

 

其中 temp.jpg 尺寸为 277×57
Firefox 下的正常表现:

 

IE6 下的非正常表现:

 

很明显地可以看到 IE 中,li 的表现高度,并非我们设定的 57px,而是比其要高,这是因为 img 下面多出了 5px 的空白。

 

解决方法 一
  使 li 浮动,并设置 img 为块级元素
 

ul{width: 280px;}
ul li{float:left;display:block;height:57px;width:277px;}
img{display: block;}

 

 

解决方法 二
  设置 ul 的 font-size:0;

ul{width: 280px;font-size: 0;}
ul li{display:block;height:57px;width:277px;}

 

 

解决方法 三
  设置 img 的 vertical-align: bottom;

ul{width: 280px;font-size: 0;}
ul li{display:block;height:57px;width:277px;}
img{vertical-align:bottom;}

 

 

解决方法 四
  设置 img 的 margin-bottom: -5px;

ul{width: 280px;font-size: 0;}
ul li{display:block;height:57px;width:277px;}
img{margin-bottom: -5px;}

 

分享到:
评论

相关推荐

    IE img多余5像素空白解决方法

    在网页开发过程中,尤其是涉及到IE浏览器时,常常会遇到一些兼容性问题,本文主要讨论的是一个常见的IE浏览器下的CSS布局问题:图片(img)下方出现5像素的多余空白。这个问题主要出现在`&lt;li&gt;`元素内包含`&lt;a&gt;`链接,而...

    img 标签下多余空白的解决方法

    在网页设计中,尤其是在使用HTML和CSS进行布局时,有时会遇到一个常见的问题,即图片元素`&lt;img&gt;`在某些浏览器中,尤其是IE6,会出现下方的多余空白。这个问题不仅影响页面的美观,还可能导致布局错位。解决这个问题...

    IE 常见bug 及其fix

    解决方法有两种:一是给`li`元素添加`float: left;`属性;二是设置`li`元素的`display`属性为`inline`。 ```css ul li { float: left; /* 解决方法一 */ /* 或者 */ display: inline; /* 解决方法二 */ } ``` 3...

    css常见的bug(ie)

    在IE中,img元素下方有时会出现额外的空白。这通常是由于默认的行内元素行为造成的。通过将图片的`display`属性设置为`block`,可以消除这个空白。 以上只是CSS在IE浏览器中部分常见问题的解决方法。在实际开发中...

    ie6,ie7兼容性总结

    **问题描述**:在IE6和IE7中,`img`标签后若有空白字符,会导致图片下方出现额外的空白空间。 **解决方案**:通过设置`img`的`display`属性为`block`来解决。 ##### 9. 失去`line-height`效果 **问题描述**:在IE...

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

    解决这个问题的方法有很多种,以下是几种常见的解决方案: 1. **浮动元素**:将`&lt;li&gt;`元素设置为浮动元素,如`float:left;`,这样可以消除上下文的影响,但需要注意清除浮动以防止布局问题。 ```css li { float: ...

    CSS针对IE6实现网页图片底部留出空白的方法

    另一种解决方法是通过负的`margin-bottom`来抵消图片下方的空白。这种方法直接在`&lt;img&gt;`标签上设置`margin-bottom: -5px`。这将把图片底部拉近,消除多余的空间。但是,需要注意的是,负的边距可能会影响页面其他...

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

    以上就是针对IE6浏览器中图片元素`&lt;img&gt;`下方出现多余空白的常见解决方法。在实际开发中,应根据问题的具体情况选择合适的方法。同时,随着技术的发展,现在大多数浏览器已经不再支持IE6,因此在新项目中,这种问题...

    图片下面出现空白像素BUG的常用解决方法归纳

    本文将总结几种解决这一问题的常用方法。 1. **将图片转换为块级对象** 通过设置`display:block;`可以使图片元素变为块级元素,消除因行内元素特性导致的空白。例如,可以添加CSS代码: ```css #sub img { ...

    前端处理浏览器兼容问题

    **问题**:当父级元素使用相对定位并且宽度为奇数时,子元素使用绝对定位,在IE6中会出现右侧多出1像素。 **解决方法**:通过将宽度的奇数值改为偶数来解决此问题。 ```css .parent { position: relative; width...

    IE下元素空白区域(该元素在上img在下)与图片重叠无法触发鼠标事件

    在IE浏览器中,当一个元素(我们称之为元素A)覆盖在一张图片(img元素)之上,如果元素A没有背景色(例如:background:none或transparent),并且没有其他可见内容(如设置display:none,visibility:hidden,或者...

    css浏览器兼容问题

    11. **IE6宽度奇数像素导致右侧多出1px问题**: 调整宽度为偶数像素可以解决此问题。 12. **IE6两层间3px间距问题**: 为两边层都设置浮动或在左层添加`margin-right:-3px;`可消除间距。 13. **IE6子元素绝对...

    浏览器兼容问题

    **问题描述**:当父级元素使用相对定位,且宽度设置为奇数时,子元素使用绝对定位,在 IE6 中会出现右侧多出 1 像素的情况。 **解决方案**:将宽度的奇数值改为偶数。 **解释**:更改宽度值为偶数可以解决此问题。...

    DIV+CSS浏览器的兼容性_大前端1

    在 FF 和 IE 中,图片与包含它的 div 之间可能存在不必要的空白。解决方法是为 img 添加 `display:block` 或者在 img 后添加一个空的非换行符,如 `&lt;div&gt;&lt;img src="" mce_src=""/&gt;;"&gt;&nbsp;&lt;/span&gt;&lt;/div&gt;`。 处理...

    IE和FIREFOX下CSS的区别与解决方法第1/2页

    ### IE和FIREFOX下CSS的区别与解决方法 #### 对高度的解析差异及解决策略 在探讨CSS在不同浏览器下的表现差异时,IE(Internet Explorer)与Firefox是两个经常被提及的对象。这两种浏览器在处理CSS时有着显著的...

Global site tag (gtag.js) - Google Analytics