您当前位于：
项目兼容问题 ——> 浏览器常见兼容问题-IE6列表项中的3像素bug
浏览器常见兼容问题-IE6列表项中的3像素bug
2015/05/25 22:01:23
|
作者：HTML5学堂（码匠）
|
分类：项目兼容问题
|
关键词：浏览器兼容,IE6,三像素,bug
经典3像素bug —— IE6的列表项
HTML5学堂：今天继续讲解IE6的兼容问题。对于列表项元素，存在着一种非常经典的3像素bug。在我们处理a标签时，通常都会遇到。为了比较好的用户体验，我们会将列表项中的元素进行浮动，或者让a标签以块元素的方式展示，以占满整行，而这种处理方法也会直接导致li的bug问题。
li经典3像素BUG
触发浏览器：IE6
触发条件：li列表项元素当中的行元素，设置display:block或float:left，均会触发。
BUG效果：每个li下面多3像素空隙。
下面这两种需求还是比较常见的（如图）：
一个由文章标题组成的基本列表。里面有可能有两种需求，一种是有标题，有时间，为了方便操作，通常会用两种标签，左右浮动。另一种则都是标题，为了方便里面的a标签容易被用户点击，会对a标签进行display的处理。
一、li中的元素左右浮动
-
<!doctype html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>HTML5学堂 - li三像素经典bug</title>
-
<link rel="stylesheet" href="model/css/reset.css">
-
<style>
-
.list {
-
width: 400px;
-
}
-
.list li {
-
height: 30px;
-
border-bottom: 1px dotted #000;
-
background: #ccc;
-
line-height: 30px;
-
}
-
.list li a {
-
float: left;
-
padding-left: 10px;
-
}
-
.list li span {
-
float: right;
-
padding-right: 10px;
-
}
-
</style>
-
</head>
-
<body>
-
<ul class="list">
-
<li><a href="" title="">HTML5学堂</a><span>2015-05-25</span></li>
-
<li><a href="" title="">IE6兼容问题</a><span>2015-05-25</span></li>
-
<li><a href="" title="">列表项元素</a><span>2015-05-25</span></li>
-
<li><a href="" title="">经典的三像素bug</a><span>2015-05-25</span></li>
-
<li><a href="" title="">采用什么方式进行解决？</a><span>2015-05-25</span></li>
-
</ul>
-
</body>
-
</html>
欢迎沟通交流~HTML5学堂
二、li中的元素改变展示类型
-
<!doctype html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>HTML5学堂 - li三像素经典bug</title>
-
<link rel="stylesheet" href="model/css/reset.css">
-
<style>
-
.list {
-
width: 400px;
-
}
-
.list li {
-
height: 30px;
-
border-bottom: 1px dotted #000;
-
background: #ccc;
-
line-height: 30px;
-
}
-
.list li a {
-
display: block;
-
padding-left: 10px;
-
}
-
</style>
-
</head>
-
<body>
-
<ul class="list">
-
<li><a href="" title="">HTML5学堂</a></li>
-
<li><a href="" title="">IE6兼容问题</a></li>
-
<li><a href="" title="">列表项元素</a></li>
-
<li><a href="" title="">经典的三像素bug</a></li>
-
<li><a href="" title="">采用什么方式进行解决？</a></li>
-
</ul>
-
</body>
-
</html>
在IE6下的显示效果为：
基本解决的方法并不难，将父元素（li）也设置上浮动即可（注意：li的浮动会造成ul的高度塌陷，要及时进行浮动的清除）。IE6下的效果就变成正常啦~！
结束~~~
欢迎沟通交流~HTML5学堂
阅读：675
极客编程技术分享
