ie6 中 li 插入图片后有空隙_html/css_WEB-ITnose-html教程-PHP中文网

ie6 中 li 插入图片后有空隙_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:28:24

原创

1126人浏览过

ie6 中 li 插入图片后下方有空隙 bug，这是 ie6 的经典 bug。解决方法有很多，今天我整理了下，共 5 种，给大家分享下。

Demo

html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"/>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>    <meta name="renderer" content="webkit"/>    <meta name="keywords" content=""/>    <meta name="description" content=""/>    <title>demo</title>    <link rel="stylesheet" href="css/main.css"/></head><body>    <ul>        <li><img  src="images/cat.jpg"/ alt="ie6 中 li 插入图片后有空隙_html/css_WEB-ITnose" ></li>        <li><img  src="images/cat.jpg"/ alt="ie6 中 li 插入图片后有空隙_html/css_WEB-ITnose" ></li>        <li><img  src="images/cat.jpg"/ alt="ie6 中 li 插入图片后有空隙_html/css_WEB-ITnose" ></li>        <li><img  src="images/cat.jpg"/ alt="ie6 中 li 插入图片后有空隙_html/css_WEB-ITnose" ></li>        <li><img  src="images/cat.jpg"/ alt="ie6 中 li 插入图片后有空隙_html/css_WEB-ITnose" ></li>        <li><img  src="images/cat.jpg"/ alt="ie6 中 li 插入图片后有空隙_html/css_WEB-ITnose" ></li>    </ul></body></html>

登录后复制

Css

@charset "utf-8";@import "E:/my_project/zSass/base";ul {    width:774px;    @include center-block;    li {        @include float;        width:162px;        height:162px;        margin:0 10px 10px 0;        background-color:#f00;    }}

登录后复制

我们可以看到在 ie6 下 li 中图片下方有大约 1~2px 的空隙，即使我们给 li 宽高和图片一样也没用，如图所示：

立即学习“前端免费学习笔记（深入）”；

产生原因

我们知道，在写代码的时候，为了代码的整洁以及可读性，我们通常会进行类似 tab 缩进和 enter 换行，而这个问题就是 回车换行 所造成的，回车的时候会自动产生一个回车符，在 ie6 下会解析回车符，其他浏览器不会解析回车符，而回车符也算是字符的一种，也会有大小及行高之类的，所以在 ie6 下就会造成上述 bug。