Float 菜单水平居中简单方法
网站建设 2021-07-03 08:42www.dzhlxh.cn网站建设
我这里还有更简单的办法，先展示：
其实我外面应该再套一个div，但为了减少碳排放，舍弃。
提示：您可以先修改部分代码再运行
其中最为关键的是这一句：
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
为了照顾较低版本IE，这里使用了条件注释，感觉在IE7以下中，display:inline;的作用就相当于inline-block;。
根据上面代码进化而来的滑动门导航：
提示：您可以先修改部分代码再运行
其中，这两句有必要说明一下，以免被认为是多余的：
#navigation li a{overflow:hidden;} /* 隐藏掉IE5.5、6多掉的那3px，不是3px bug哈！因为height:30px;line-height:33px; 在IE5.5、6中高度就是33px了。 */
#navigation li a span{cursor:hand;}/* 照顾IE 5.5、6、7鼠标放在span上面不呈手型的bug。此外，IE5.5不支持cursor:pointer;但IE全版本都认识cursor:hand;*/
完工了，缺点就是，写那一行条件注释，对于有xhtml洁癖的人来说，就像眼里的沙子，想除掉，那就使用hack也无妨！呵呵！
在safari4，chorme，opera10，ie5.5、5、6、7,ff3中均暂未发现问题。
其实我外面应该再套一个div，但为了减少碳排放，舍弃。
提示：您可以先修改部分代码再运行
其中最为关键的是这一句：
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
为了照顾较低版本IE，这里使用了条件注释，感觉在IE7以下中，display:inline;的作用就相当于inline-block;。
根据上面代码进化而来的滑动门导航：
提示：您可以先修改部分代码再运行
其中，这两句有必要说明一下，以免被认为是多余的：
复制代码
代码如下:#navigation li a{overflow:hidden;} /* 隐藏掉IE5.5、6多掉的那3px，不是3px bug哈！因为height:30px;line-height:33px; 在IE5.5、6中高度就是33px了。 */
#navigation li a span{cursor:hand;}/* 照顾IE 5.5、6、7鼠标放在span上面不呈手型的bug。此外，IE5.5不支持cursor:pointer;但IE全版本都认识cursor:hand;*/
完工了，缺点就是，写那一行条件注释，对于有xhtml洁癖的人来说，就像眼里的沙子，想除掉，那就使用hack也无妨！呵呵！
在safari4，chorme，opera10，ie5.5、5、6、7,ff3中均暂未发现问题。
上一篇：网页设计中常用的19个Web安全字体
下一篇：简单的CSS 下拉导航菜单实现代码