一个自动居中的导航条实例与相关问题 DIV+CSS

所属分类: 网络编程 / CSS/HTML 阅读数: 1251
收藏 0 赞 0 分享

这是我刚刚作的一个导航条,为了让那四个LINK居中,我这样作了,但作完后发现了很多的问题,写出来和大家分享一下!

首先我们先来看一下这个导航条!


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

问题:
1、空格BUG出现我FIREFOX中,不知道为什么,如果把LI分不写在同一行,问题就出来了,你可以在上边运行代码中试一下!

2、IE和FIREFOX的微小区别(看下图),如果你没有发现这小小的区别,你就不会在CSS中写成padding:6px 15px 5px 15px;  也就永远不会把中间的竖线和上下两条线连在一起!(这其中IE6和IE7还有更微小的区别);


3、#nav li a{margin:1px;}这行是不是没有用?如果你这样认为你就删了试一下,看行不行!

4、页面在缩放到一定小时会折行,FIREFOX中用min-width解决,而IE中min-width不认识,所以只有用:expression((documentElement.clientWidt.....来解决了!我在上边的代码中没有加,如果你不想折行就把上边#nav这行改成:

 程序代码
复制代码 代码如下:

#nav{height:24px; border-bottom:1px solid #D28A05; border-top:1px solid #D28A05;background-image: url(nav_bg.jpg);background-color: #FF9900; text-align:center;min-width:400px;width: expression((documentElement.clientWidth < 400) ? "400px" : "auto" );}


基本就这行多问题,建议自已作一下,这样你会发现特别多的问题!
另外:这篇BLOG会在FIREFOX中很难看,你就凑合看吧!
再另外:我写的难免有问题,如果真有,你就指出来,我会非常高兴的!

更多精彩内容其他人还在看

推荐深入理解css中的position定位和z-index属性

推荐深入理解css中的position定位和z-index属性
收藏 0 赞 0 分享

不错的10个你未必知道的CSS技巧

不错的10个你未必知道的CSS技巧
收藏 0 赞 0 分享

一点小小的创意css鼠标放上去则显示电话号码

一点小小的创意css鼠标放上去则显示电话号码
收藏 0 赞 0 分享

固定表格的高度超过指定高度就隐藏的方法

固定表格的高度超过指定高度就隐藏的方法
收藏 0 赞 0 分享

推荐个Css的filter常用滤波器属性及语句大全

推荐个Css的filter常用滤波器属性及语句大全
收藏 0 赞 0 分享

淘宝段正淳的css笔记大全第1/4页

淘宝段正淳的css笔记大全
收藏 0 赞 0 分享

CSS实现的一个图片放大展示的一种思路

CSS实现的一个图片放大展示的一种思路
收藏 0 赞 0 分享

用css滤镜实现的文字描边效果的代码

用css滤镜实现的文字描边效果的代码
收藏 0 赞 0 分享

用css实现的带阴影的表格效果的代码

用css实现的带阴影的表格效果的代码
收藏 0 赞 0 分享

又一实用的常用CSS缩写语法收集

又一实用的常用CSS缩写语法收集
收藏 0 赞 0 分享
查看更多