HTML5学堂-码匠 HTML5学堂

您当前位于:历史兼容问题 ——> 浏览器常见兼容问题-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像素空隙。

下面这两种需求还是比较常见的(如图):

li经典3像素bug
li经典3像素bug 2

一个由文章标题组成的基本列表。里面有可能有两种需求,一种是有标题,有时间,为了方便操作,通常会用两种标签,左右浮动。另一种则都是标题,为了方便里面的a标签容易被用户点击,会对a标签进行display的处理。

一、li中的元素左右浮动

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5学堂 - li三像素经典bug</title>
  6.     <link rel="stylesheet" href="model/css/reset.css">
  7.     <style>
  8.         .list {
  9.             width: 400px;
  10.         }
  11.         .list li {
  12.             height: 30px;
  13.             border-bottom: 1px dotted #000;
  14.             background: #ccc;
  15.             line-height: 30px;
  16.         }
  17.         .list li a {
  18.             float: left;
  19.             padding-left: 10px;
  20.         }
  21.         .list li span {
  22.             float: right;
  23.             padding-right: 10px;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <ul class="list">
  29.         <li><a href="" title="">HTML5学堂</a><span>2015-05-25</span></li>
  30.         <li><a href="" title="">IE6兼容问题</a><span>2015-05-25</span></li>
  31.         <li><a href="" title="">列表项元素</a><span>2015-05-25</span></li>
  32.         <li><a href="" title="">经典的三像素bug</a><span>2015-05-25</span></li>
  33.         <li><a href="" title="">采用什么方式进行解决?</a><span>2015-05-25</span></li>
  34.     </ul>
  35. </body>
  36. </html>

欢迎沟通交流~HTML5学堂

二、li中的元素改变展示类型

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5学堂 - li三像素经典bug</title>
  6.     <link rel="stylesheet" href="model/css/reset.css">
  7.     <style>
  8.         .list {
  9.             width: 400px;
  10.         }
  11.         .list li {
  12.             height: 30px;
  13.             border-bottom: 1px dotted #000;
  14.             background: #ccc;
  15.             line-height: 30px;
  16.         }
  17.         .list li a {
  18.             display: block;
  19.             padding-left: 10px;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <ul class="list">
  25.         <li><a href="" title="">HTML5学堂</a></li>
  26.         <li><a href="" title="">IE6兼容问题</a></li>
  27.         <li><a href="" title="">列表项元素</a></li>
  28.         <li><a href="" title="">经典的三像素bug</a></li>
  29.         <li><a href="" title="">采用什么方式进行解决?</a></li>
  30.     </ul>
  31. </body>
  32. </html>

在IE6下的显示效果为:

IE6下 li显示出3像素的bug问题

基本解决的方法并不难,将父元素(li)也设置上浮动即可(注意:li的浮动会造成ul的高度塌陷,要及时进行浮动的清除)。IE6下的效果就变成正常啦~!

结束~~~

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS