ie6 中 li 插入图片后有空隙_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:28:24963검색
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
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.