多浏览器下IE6 IE7 firefox li 间距问题第1/2页

181 阅读 0 评论 120 点赞

我是靠谱客的博主花痴小鸭子，最近开发中收集的这篇文章主要介绍多浏览器下IE6 IE7 firefox li 间距问题第1/2页，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

今天小雷提到一个ie5下li产生空白行距的问题，下面来测试一下。
新建一个简单的HTML测试文件，下面来测试ul li标签。

复制代码代码如下:

<ul>   
<li><a href="#">菜单一</a></li>   
<li><a href="#">菜单一</a></li>   
<li><a href="#">菜单一</a></li>   
<li><a href="#">菜单一</a></li>   
<li><a href="#">菜单一</a></li>   
<li><a href="#">菜单一</a></li>   
</ul> 

测试一，定义css为如下代码，效果如下：
body{font-size:12px;margin:0}
ul{list-style:none;margin:0;padding:0;width:120px;}
ul li{background:green;height:20px;}
ul li a{color:#fff;padding:0 0 0 10px;}
发现在IE5和IE5.5下左边都产生了空白，并且在IE5下，LI之间的行距产生空白,如下图