解决IE6中li有上下间距的bug
2009-09-11 15:48
330 查看
今天修改网页无意中遇到的问题
<!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>无标题文档</title>
<style>
/*TAB内容层*/
.show_tabC { display:block; }
.hidden_tabC { display:none; }
/*文字新闻列表*/
.word_ul { list-style-type: none; padding: 0; display: block; margin-top: 15px; }
.word_li { display: block; width: 470px; height: 24px; letter-spacing: 0em; font-size: 13px; margin-left: 10px; background-color:#F30; }
.word_li span { color: #333; float:right; font-size: 12px; }
.word_li a { text-decoration: none; padding-left: 10px; float:left; font-size: 13px; line-height:24px; color:#036 }
.word_li a:hover { color:#F00; font-size: 13px; }
</style>
</head>
<body>
<div id="tabC2" class="show_tabC">
<ul class="word_ul">
<li class="word_li"><a href="[field:arcurl /]">[field:title /]</a><span>[field:pubdate function="MyDate('y-m-d',@me)"/]</span></li>
<li class="word_li"><a href="[field:arcurl /]">[field:title /]</a><span>[field:pubdate function="MyDate('y-m-d',@me)"/]</span></li>
<li class="word_li"><a href="[field:arcurl /]">[field:title /]</a><span>[field:pubdate function="MyDate('y-m-d',@me)"/]</span></li>
<li class="word_li"><a href="[field:arcurl /]">[field:title /]</a><span>[field:pubdate function="MyDate('y-m-d',@me)"/]</span></li>
<li class="word_li"><a href="[field:arcurl /]">[field:title /]</a><span>[field:pubdate function="MyDate('y-m-d',@me)"/]</span></li>
</ul>
</div>
</body>
</html>
结果就出现莫名其妙的间隔
![](http://images.cnblogs.com/cnblogs_com/cnfiowen/QQ截图未命名222.jpg)
解决方法:
在<li>属性中加入vertical-align: bottom;
还有就是把时间的那个<span>放到<a>左边,然后float:right;
源码:
<!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>无标题文档</title>
<style>
/*TAB内容层*/
.show_tabC { display:block; }
.hidden_tabC { display:none; }
/*文字新闻列表*/
.word_ul { list-style-type: none; padding: 0; display: block; margin-top: 15px; }
.word_li { display: block; width: 470px; height: 24px; letter-spacing: 0em; font-size: 13px; margin-left: 10px; background-color:#F30; vertical-align:bottom; }
.word_li span { color: #333; float:right; font-size: 12px; }
.word_li a { text-decoration: none; padding-left: 10px; float:left; font-size: 13px; line-height:24px; color:#036 }
.word_li a:hover { color:#F00; font-size: 13px; }
</style>
</head>
<body>
<div id="tabC2" class="show_tabC">
<ul class="word_ul">
<li class="word_li"><span>[field:pubdate function="MyDate('y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
<li class="word_li"><span>[field:pubdate function="MyDate('y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
<li class="word_li"><span>[field:pubdate function="MyDate('y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
<li class="word_li"><span>[field:pubdate function="MyDate('y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
</ul>
</div>
</body>
</html>
<!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>无标题文档</title>
<style>
/*TAB内容层*/
.show_tabC { display:block; }
.hidden_tabC { display:none; }
/*文字新闻列表*/
.word_ul { list-style-type: none; padding: 0; display: block; margin-top: 15px; }
.word_li { display: block; width: 470px; height: 24px; letter-spacing: 0em; font-size: 13px; margin-left: 10px; background-color:#F30; }
.word_li span { color: #333; float:right; font-size: 12px; }
.word_li a { text-decoration: none; padding-left: 10px; float:left; font-size: 13px; line-height:24px; color:#036 }
.word_li a:hover { color:#F00; font-size: 13px; }
</style>
</head>
<body>
<div id="tabC2" class="show_tabC">
<ul class="word_ul">
<li class="word_li"><a href="[field:arcurl /]">[field:title /]</a><span>[field:pubdate function="MyDate('y-m-d',@me)"/]</span></li>
<li class="word_li"><a href="[field:arcurl /]">[field:title /]</a><span>[field:pubdate function="MyDate('y-m-d',@me)"/]</span></li>
<li class="word_li"><a href="[field:arcurl /]">[field:title /]</a><span>[field:pubdate function="MyDate('y-m-d',@me)"/]</span></li>
<li class="word_li"><a href="[field:arcurl /]">[field:title /]</a><span>[field:pubdate function="MyDate('y-m-d',@me)"/]</span></li>
<li class="word_li"><a href="[field:arcurl /]">[field:title /]</a><span>[field:pubdate function="MyDate('y-m-d',@me)"/]</span></li>
</ul>
</div>
</body>
</html>
结果就出现莫名其妙的间隔
![](http://images.cnblogs.com/cnblogs_com/cnfiowen/QQ截图未命名222.jpg)
解决方法:
在<li>属性中加入vertical-align: bottom;
还有就是把时间的那个<span>放到<a>左边,然后float:right;
源码:
<!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>无标题文档</title>
<style>
/*TAB内容层*/
.show_tabC { display:block; }
.hidden_tabC { display:none; }
/*文字新闻列表*/
.word_ul { list-style-type: none; padding: 0; display: block; margin-top: 15px; }
.word_li { display: block; width: 470px; height: 24px; letter-spacing: 0em; font-size: 13px; margin-left: 10px; background-color:#F30; vertical-align:bottom; }
.word_li span { color: #333; float:right; font-size: 12px; }
.word_li a { text-decoration: none; padding-left: 10px; float:left; font-size: 13px; line-height:24px; color:#036 }
.word_li a:hover { color:#F00; font-size: 13px; }
</style>
</head>
<body>
<div id="tabC2" class="show_tabC">
<ul class="word_ul">
<li class="word_li"><span>[field:pubdate function="MyDate('y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
<li class="word_li"><span>[field:pubdate function="MyDate('y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
<li class="word_li"><span>[field:pubdate function="MyDate('y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
<li class="word_li"><span>[field:pubdate function="MyDate('y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
</ul>
</div>
</body>
</html>
相关文章推荐
- 解决IE6中li有上下间距的bug
- 解决IE6中li有上下间距的bug
- IE6列表上下多余间距bug解决方法
- 解决IE6-IE7下li上下间距
- 【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题)
- 【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题)
- IE6|IE7中li底部3px间距BUG
- li内有div浮动时,li出现4px间距,IE bug的解决方法
- IE6下li会继承ul属性的bug、产生条件、解决办法
- <li>标签在ie6下的上下间隔的BUG解决办法
- ie6中li插入图片后下方有空隙(经典bug)多种解决方法
- li出现间距,IE6/IE7 bug的解决方法
- ie6中li插入图片后下方有空隙(经典bug)多种解决方法
- IE6 IE7 hasLayout bug之li间的3px垂直间距
- IE6、IE7中li底部3px间距BUG
- 完美解决IE6不支持position:fixed的bug
- IE6下div图片下边4px空隙bug的解决办法
- ie6 line-height bug解决办法
- ie6的绝对定位的1px间距 bug
- JavaScript 在ie6 ie7 ie8和Firefox下bug兼容解决记录(包含部分CSS )