一个自动居中的导航条实例与相关问题 DIV+CSS
程序员文章站
2024-03-01 10:28:52
这是我刚刚作的一个导航条,为了让那四个link居中,我这样作了,但作完后发现了很多的问题,写出来和大家分享一下! 首先我们先来看一下这个导航条!
test z...
这是我刚刚作的一个导航条,为了让那四个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中很难看,你就凑合看吧!
再另外:我写的难免有问题,如果真有,你就指出来,我会非常高兴的!
下一篇: 卡BIN 博客分类: 银行业务