Home >Web Front-end >HTML Tutorial >ie6 中 li 插入图片后有空隙_html/css_WEB-ITnose
ie6 中 li 插入图片后有空隙_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:28:241002browse
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。
解决方法
第一种方法：最简单，最方便也最暴力的就是什么也不需要做，只需要压缩 html 代码就可以了，当然对于 html 代码的可读性以及可维护性就不那么友好了。
第二种方法：由于回车符是 li 之间产生的，又是字符，那么我们可以改变其字符大小就行了，代码如下：
ul { font-size:0;} 第三种方法：给 li 添加 overflow:hidden; 。
第四种方法：设置 img 为 display:block; 。
第五种方法：设置 img 为 vertical-align:top/middle/bottom;
测试浏览器：chrome/firefox/ie6-11
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：8个非常个性化的CSS3单/复选框_html/css_WEB-ITnoseNext article：手机微信_html/css_WEB-ITnose