电脑软硬件应用网
当前位置： 电脑软硬件应用网 > 设计学院 > 网络编程 > CSS教程 > 正文
IE下li下面空隙问题
IE下li下面空隙问题
2010-3-5 9:14:45　　文/蜗爱 　　出处:蜗爱css 　　

这个问题也经常遇到，见群里有人问，就写出来。发生情况：当li嵌套其它浮动元素时，在IE下（确切说IE6、IE7下，IE8没发现）占用的高度比实际高度搞出来大约3px，表现为li下面有3px的间隙。看下面代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>woaicss</title>
<style type="text/css">
 <!--
 li{height:20px;background:red;list-style-type:none;}
 li a{float:left;}
 span{float:left;}
 
 -->
</style> 
</head>
<body>
   <ul>
        <li><span>蜗爱css11111蜗爱css11111</span></li>
        <li><a href="">蜗爱css11111</a></li>
        <li><a href="">蜗爱css11111</a></li>
        <li><a href="">蜗爱css11111</a></li>
   
    </ul>
</body>
</html>

需要说明的是，包含浮动元素才会有此bug，上面的span去掉float，运行就不会有。解决办法，让li也浮动。

  • 上一篇文章：

  • 下一篇文章：
    • 最新热点 最新推荐 相关文章
    关闭IE8中的网页加速器
    CSS伪类选择器nth-child()
    IE老是自动关闭并提示flash插件故障
    IE9试用版的下载安装和卸载
    css3教程:background属性调整增强
    IE8开发人员工具无法使用的解决方法
    css教程：CSS3 Media Queries 详解
    IE缓存 如何清理缓存节约系统空间
    IE8打开网页弹出脚本提示框
    浏览器无法最大化 IE打开如何最大化
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号