45IT.COM- 电脑学习从此开始！
RSS订阅 设为首页 加入收藏
DIY硬件教程攒机经验装机配置
设计Photoshop网页设计特效
系统注册表DOS系统命令其它
存储主板显卡外设键鼠内存
维修显卡CPU内存打印机
WinXPVistaWin7unix/linux
CPU光驱电源/散热显示器其它
修技主板硬盘键鼠显示器光驱
办公ExcelWordPowerPointWPS
编程数据库CSS脚本PHP
网络局域网QQ服务器
软件网络系统图像安全

搜索

页面导航: 首页 > 设计学院 > 网络编程 > CSS教程 >

IE下li下面空隙问题

电脑软硬件应用网 45IT.COM 时间:2010-03-05 09:14 作者:蜗爱

这个问题也经常遇到，见群里有人问，就写出来。发生情况：当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也浮动。

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到： baidushare.htm
发表评论
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片
最新评论 进入详细评论页>>
你可能感兴趣的文章
推荐知识
热点知识

关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

Copyright © 2006-2012 45IT. All Rights Reserved 浙ICP备09049068号