阿林`alinBlog

 li标签的间距

阿林, 发表于:2008-12-15 02:37:27, 分类:asp 浏览( ) 评论( )  收藏这篇日志

今天优化一下学校网站首页,教育网本身网速就慢,还调用很多东西所以每次打开都在300毫秒以上,今天较少几个js,重弄了滑动门代码优化到250以下了,哈哈还是很慢啊,调用的实在是太多了大概访问数据库要有50次,首页已经能生成静态化了,不过为了整合全部功能,没有用,反正网速慢速度相差不大。
弄菜单时遇到li标签的间距问题,菜单前总是有一块空白,后来上网查才弄明白问题,在这记下...

1、解决li在IE5下产生空白行距的方法:如果li定义了宽度,那么需要在li里面再定义vertical-align: bottom;

2、宽度最好不要定义在UL,定义在LI或者UL外层的DIV里面

3、书写LI的最佳方式,li里面要书写高度和宽度,以及vertical-align: bottom;(for ie5/win bug),或者在ul外面加上一层div,并定义宽度,那么在li里面不用定义宽度和vertical-align: bottom;,也显示正常(IE5下不会产生空白行距),不过高度还是要定义一下的。
--------------------------------------------------------------------------

新建一个简单的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> 
<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为如下代码,效果如下

以下为引用的内容:
view plaincopy to clipboardprint?
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;} 
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之间的行距产生空白,如下图

 

测试二、定义css为如下代码

以下为引用的内容:
view plaincopy to clipboardprint?
body{font-size:12px;margin:0}  
ul{list-style:none;margin:0;padding:0;}  
ul li{background:green;height:20px;width:120px;}  
ul li a{color:#fff;padding:0 0 0 10px;} 
body{font-size:12px;margin:0}
ul{list-style:none;margin:0;padding:0;}
ul li{background:green;height:20px;width:120px;}
ul li a{color:#fff;padding:0 0 0 10px;}

和测试一相比,只是将width:120px;从ul的定义放置到li的定义,解决了IE5和IE5.5左边产生空白的问题,而IE5的li之间的间距还是有。如下图

 

测试三、定义css为如下代码

以下为引用的内容:
body{font-size:12px;margin:0}
ul{list-style:none;margin:0;padding:0;}
ul li{background:green;height:20px;width:120px;vertical-align: bottom;}
ul li a{color:#fff;padding:0 0 0 10px;}

和测试二比较,在li的定义中加上vertical-align: bottom;ie5下正常,li之间的空白行距消失了,取得各个浏览器的效果一样,如下图

 

总结

1、解决li在IE5下产生空白行距的方法:如果li定义了宽度,那么需要在li里面再定义vertical-align: bottom;

2、宽度最好不要定义在UL,定义在LI或者UL外层的DIV里面

3、书写LI的最佳方式,li里面要书写高度和宽度,以及vertical-align: bottom;(for ie5/win bug),或者在ul外面加上一层div,并定义宽度,那么在li里面不用定义宽度和vertical-align: bottom;,也显示正常(IE5下不会产生空白行距),不过高度还是要定义一下的。

 

http://www.chinaz.com/Design/Rules/092GED2007.html

http://info.sundns.com/article/article_detail_articleid_13034.html

 

 暂无标签
正在读取日志的评论数据,请稍后……
正在加载日志评论签写框,请稍后……
成员登录通道
正在载入成员登录通道...
添加文章到网摘

添加到网摘:

BLOG 日历助手
正在载入日历助手...
BLOG 分类列表
BLOG 统计信息
正在载入统计信息...
BLOG 站内搜索

BLOG 日志归档
BLOG 最新评论
{$SideComment}
BLOG 最新留言
{$SideGB}
BLOG 友情链接