修复IE浏览器li间出现间距BUG

作者：佳明妈来源：未知 2010-08-27 人气：

有时候在IE浏览器下li元素莫名其妙的出现一个间距，很是恼人，下面我们来分析这个bug出现的原因和解决方案。修复IE浏览器li间出现间距BUG, bug原因：当li元素设置了高度，且li内元素

<!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" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>修复IE浏览器li间出现间距BUG-懒人建站</title>
<meta name="keywords" content="JS代码,js特效代码大全,jquery特效,导航菜单代码,焦点幻灯片,企业网页设计欣赏" />
<meta name="description" content="懒人建站为您提供-js特效代码大全，JS广告代码，导航菜单代码，企业网页设计欣赏，基于jquery的特效插件，焦点幻灯片代码和各种建站技巧。" />
<style>
li{ background-color: green; height: 20px; color:#fff;}
#ul2 li{vertical-align: bottom;}
li a { float: left; color:#fff;}
li span { float: right; }
</style>

</head>
<body>

<ul id="ul1">
<li><a href="">当li元素设置了高度，且li内元素浮动时会触发该bug。</a>解决方法：li设置css vertical-align: bottom</li>
<li><a href="http://www.51xuediannao.com/">JS代码</a>懒人建站</li>
</ul>
<ul id="ul2">
<li><a href="http://www.51xuediannao.com/">网页特效</a>懒人建站</li>
<li><a href="http://www.51xuediannao.com/js/nav">导航菜单</a>懒人建站</li>
</ul>
当li元素设置了高度，且li内元素浮动时会触发该bug。解决方法：li设置css vertical-align: bottom

<div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;">
本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站</a> 收集整理 我要学电脑.COM →www.51xuediannao.com 
<a href="http://www.51xuediannao.com">懒人建站</a> http://www.51xuediannao.com 
我们为您提供-
<a href="http://www.51xuediannao.com/html+css">HTML+CSS模板</a>，
<a href="http://www.51xuediannao.com/">JS代码</a>，
<a href="http://www.51xuediannao.com/">网页特效</a>，
<a href="http://www.51xuediannao.com/js/nav">导航菜单</a>，
<a href="http://www.51xuediannao.com">焦点幻灯片<a>，
<a href="http://www.51xuediannao.com">网页欣赏</a>和
<a href="http://www.51xuediannao.com">CSS技巧</a>；
懒人建站只收录实用和能提高用户体验的代码
我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。
</div>
</body>
</html>

有时候在IE浏览器下li元素莫名其妙的出现一个间距，很是恼人，下面我们来分析这个bug出现的原因和解决方案。

修复IE浏览器li间出现间距BUG,

bug原因：当li元素设置了高度，且li内元素浮动时会触发该bug。

解决方法：li设置css vertical-align: bottom 如：#ul2 li{vertical-align: bottom;}

这个bug只是ie浏览器中出现，火狐中没有这种现象。

你可以在ie6、ie7浏览器中观察上面的演示文件，演示文件中的第一个 ul 是没有修复的。

↓ 查看全文

本文链接：修复IE浏览器li间出现间距BUGhttps://www.51xuediannao.com/js/texiao/570.html

修复IE浏览器li间出现间距BUG由懒人建站收集整理，您可以自由传播，请主动带上本文链接

懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。

上一篇：让ie支持CSS圆角属性htc插件
下一篇：让现在的浏览器支持html5标签元素的方法

修复IE浏览器li间出现间距BUG

修复IE浏览器li间出现间距BUG-最新评论

网页特效-热门文章

网页特效-推荐文章

活跃用户

修复IE浏览器li间出现间距BUG

修复IE浏览器li间出现间距BUG-相关文章

修复IE浏览器li间出现间距BUG-最新评论

网页特效-热门文章

网页特效-推荐文章

活跃用户