今天同事让帮看个竖向导航:
当在IE8,火狐下鼠标浮动(正常效果如下图)
但在IE7下鼠标浮动s效果如下图:
从两张效果图可以看出这个格子之间距离明显不一样
经过查找发现造成此现象的代码如下(注意红色部分):
#menu li a { width: 160px; height: 30px; line-height: 30px;text-align: center; display: block; text-decoration: none; color: #fff; }
在此知道是双倍边距的问题,根据这个原理把display: block 改为了 display: inline 双倍边距不存在了,但a标签里的文字不能居中了。
这样最终也解决不了问题,在网上查了很多,有这种方法可以解决如下代码:
(1)
#menu li a { width: 160px; height: 30px; line-height: 30px;text-align: center; display: inline; zoom:1;
border:1px; text-decoration: none; color: #fff; }
(2)
#menu li a { width: 160px; height: 30px; line-height: 30px;text-align: center; display: inline-block;
border:1px; text-decoration: none; color: #fff; }