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浏览器时,常常会遇到一些兼容性问题,本文主要讨论的是一个常见的IE浏览器下的CSS布局问题:图片(img)下方出现5像素的多余空白。这个问题主要出现在`<li>`元素内包含`<a>`链接,而...
在网页设计中,尤其是在使用HTML和CSS进行布局时,有时会遇到一个常见的问题,即图片元素`<img>`在某些浏览器中,尤其是IE6,会出现下方的多余空白。这个问题不仅影响页面的美观,还可能导致布局错位。解决这个问题...
解决方法有两种:一是给`li`元素添加`float: left;`属性;二是设置`li`元素的`display`属性为`inline`。 ```css ul li { float: left; /* 解决方法一 */ /* 或者 */ display: inline; /* 解决方法二 */ } ``` 3...
在IE中,img元素下方有时会出现额外的空白。这通常是由于默认的行内元素行为造成的。通过将图片的`display`属性设置为`block`,可以消除这个空白。 以上只是CSS在IE浏览器中部分常见问题的解决方法。在实际开发中...
**问题描述**:在IE6和IE7中,`img`标签后若有空白字符,会导致图片下方出现额外的空白空间。 **解决方案**:通过设置`img`的`display`属性为`block`来解决。 ##### 9. 失去`line-height`效果 **问题描述**:在IE...
解决这个问题的方法有很多种,以下是几种常见的解决方案: 1. **浮动元素**:将`<li>`元素设置为浮动元素,如`float:left;`,这样可以消除上下文的影响,但需要注意清除浮动以防止布局问题。 ```css li { float: ...
另一种解决方法是通过负的`margin-bottom`来抵消图片下方的空白。这种方法直接在`<img>`标签上设置`margin-bottom: -5px`。这将把图片底部拉近,消除多余的空间。但是,需要注意的是,负的边距可能会影响页面其他...
以上就是针对IE6浏览器中图片元素`<img>`下方出现多余空白的常见解决方法。在实际开发中,应根据问题的具体情况选择合适的方法。同时,随着技术的发展,现在大多数浏览器已经不再支持IE6,因此在新项目中,这种问题...
本文将总结几种解决这一问题的常用方法。 1. **将图片转换为块级对象** 通过设置`display:block;`可以使图片元素变为块级元素,消除因行内元素特性导致的空白。例如,可以添加CSS代码: ```css #sub img { ...
**问题**:当父级元素使用相对定位并且宽度为奇数时,子元素使用绝对定位,在IE6中会出现右侧多出1像素。 **解决方法**:通过将宽度的奇数值改为偶数来解决此问题。 ```css .parent { position: relative; width...
在IE浏览器中,当一个元素(我们称之为元素A)覆盖在一张图片(img元素)之上,如果元素A没有背景色(例如:background:none或transparent),并且没有其他可见内容(如设置display:none,visibility:hidden,或者...
11. **IE6宽度奇数像素导致右侧多出1px问题**: 调整宽度为偶数像素可以解决此问题。 12. **IE6两层间3px间距问题**: 为两边层都设置浮动或在左层添加`margin-right:-3px;`可消除间距。 13. **IE6子元素绝对...
**问题描述**:当父级元素使用相对定位,且宽度设置为奇数时,子元素使用绝对定位,在 IE6 中会出现右侧多出 1 像素的情况。 **解决方案**:将宽度的奇数值改为偶数。 **解释**:更改宽度值为偶数可以解决此问题。...
在 FF 和 IE 中,图片与包含它的 div 之间可能存在不必要的空白。解决方法是为 img 添加 `display:block` 或者在 img 后添加一个空的非换行符,如 `<div><img src="" mce_src=""/>;"> </span></div>`。 处理...
### IE和FIREFOX下CSS的区别与解决方法 #### 对高度的解析差异及解决策略 在探讨CSS在不同浏览器下的表现差异时,IE(Internet Explorer)与Firefox是两个经常被提及的对象。这两种浏览器在处理CSS时有着显著的...