display:inline-block产生的间隙问题

.top{ height:35px; line-height:35px; margin-bottom:40px; background:#000; opacity:0.7;}
.top a{ display:inline-block; width:25%; text-align:center; color:#fff; *margin-right:-2px;}
.top a:hover{ color:yellow;}

<div class="top">
	<a href="index.html">返回首页</a><a href="use.html">如何使用</a><a href="effect.html">基本效果</a><a href="demo.html">Demo</a>
</div>

a标签写成一排是为了兼容火狐

*margin-right是为了兼容ie7

ie67891011 火狐 谷歌测试通过

PS：使用display:inline-block来实现这种并排效果的话就这样写，如果嫌麻烦还可以使用浮动来解决。