<li>标签插入图片链接在IE6下<img>有5px的空白解决4种方法

最新推荐文章于 2023-06-30 02:54:03 发布

宵蓝

最新推荐文章于 2023-06-30 02:54:03 发布

阅读量564

点赞数

原文链接：http://www.cnblogs.com/wanghaibin/articles/2364523.html

版权

很多情况下我们都会在列表标签<li></li>中插入图片链接，如<li><a herf=”#"><img src=”a.png” /></a></li>。这段代码在IE6中会显示有“间隙”。

测试：

用Dreamweaver新建一个新文档，在<body></body>中插入html代码：

<ul>
<li><a href="#"><img src="images/277-57.png" width="277" height="57" /></a></li>
<li><a href="#"><img src="images/277-57.png" width="277" height="57" /></a></li>
<li><a href="#"><img src="images/277-57.png" width="277" height="57" /></a></li>
<li><a href="#"><img src="images/277-57.png" width="277" height="57" /></a></li>
</ul>

然后在<head></head>标签中插入CSS样式代码：

<style type="text/css">
ul {
    width: 280px;
}
ul li {
    display:block;
    height:57px;
    width:277px;
}
</style>

测试：IE6, IE8,Firefox

接下来，我们要解决IE6下的“间隙”问题：

方法一：使li浮动，img为块级元素。

ul li {
    float:left;/*浮动*/
    display:block;
    height:57px;
    width:277px;
}
img {
    display: block;
}

经过上面的样式修改，在IE6下显示的效果就会像IE8下的效果！

接下来我们要去掉“边框问题”，在IE系列中img标签都有边框问题，所以我们要定义<img> 的边框为0px。这样才能和其他浏览器显示最终的效果一样！

img {
    display: block;
    border-width:0;
}

到这里就基本结束了！还有其他几种方法可以消除li下图片链接间隙问题：

方法二：

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;
}

示例下载

转载于:https://www.cnblogs.com/wanghaibin/articles/2364523.html

宵蓝

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
<li>标签插入图片链接在IE6下<img>有5px的空白解决4种方法

很多情况下我们都会在列表标签<li></li>中插入图片链接，如<li><a herf=”#"><img src=”a.png” /></a></li>。这段代码在IE6中会显示有“间隙”。测试：用Dreamweaver新建一个新文档，在<body></body>中插入html代码：...
复制链接

扫一扫