css火狐兼容性问题

这是导航的样式
.top_nav{ position:relative;width:100%; height:48px; background:#2aa3ce; overflow:hidden;}
.top_nav ul{ position:relative;width:965px; height:48px; margin:auto; overflow:hidden;}
.top_nav ul li{ position:relative;width:107px; line-height:48px; text-align:center; float:left;font-family:"Microsoft YaHei"; font-size:16px;}
.top_nav ul li a:link,.top_nav ul li a:visited,.top_nav ul li a:active{ position:absolute; width:107px; height:48px; left:0px; top:0px;color:#fff;text-decoration: none; background:#06F;}
.top_nav ul li a:hover { position:absolute; width:107px; height:48px; left:0px; top:0px;text-decoration: none;color:#333;background:#333;}
在火狐显示的时候所有的链接都重叠在一起了,我设置li的啊链接样式是希望鼠标移动到上边整个区块变色,声的使用js麻烦

第1个回答  2014-11-04
  您好,感谢您对火狐的支持

  a加上position:absolute之后,a标签就重叠了,所以会显示在一起。
  您可以在火狐官方网站下载火狐浏览器,在火狐社区了解更多内容。希望我的回答对您有所帮助,如有疑问,欢迎继续在本平台咨询。本回答被网友采纳
第2个回答  推荐于2016-08-28

position:不要乱用。除了top_nav,其他的position:relative;position:absolute;都去掉。

.top_nav{position:relative;width:100%; height:48px; background:#2aa3ce; overflow:hidden;}
.top_nav ul{width:965px; height:48px; margin:auto; overflow:hidden;}
.top_nav ul li{width:107px; line-height:48px; text-align:center; float:left;font-family:"Microsoft YaHei"; font-size:16px;}
.top_nav ul li a:link,.top_nav ul li a:visited,.top_nav ul li a:active{color:#fff;text-decoration: none; background:#06F;}
.top_nav ul li a:hover {text-decoration: none;color:#333;background:#333;}

追问

我主要是想鼠标移动到连接上是这种显示效果的,不想用js,所以想到给a链接加宽高和position:absolute的,360 ie可以但是火狐什么的就不行了!

本回答被提问者和网友采纳
第3个回答  2014-11-04
为什么你要给a加上position:absolute呢。加了这个,a标签都定位在一起了,肯定会重叠

相关了解……

你可能感兴趣的内容

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网