IE 6 7 display:inline-block多一像素解决方法
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css教程">
.tab-box{border:1px #d1eacc solid;width:215px;margin:0 auto;}
.tab-box .btn{margin:1px;cursor:pointer;font-size:0;}
.btn span{background:#f2fde2;width:105px;text-align:center;height:29px;line-height:29px;color:#4ca72d;display:inline-block;font-size:12px;overflow:hidden;padding:0;margin:0;}
</style>
</head>
<body>
<div class="tab-box">
<div class="btn clearfix">
<span>最新导读</span>
<span>热点关注</span>
</div>
</div>
</body>
</html>元素之间不应该有间歇（包括换行和空格,如果要兼容ie系列就必须用浮动了）
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
.tab-box{border:1px #d1eacc solid;width:210px;margin:0 auto;}
.tab-box .btn{cursor:pointer;font-size:0;}
.btn span{background:#f2fde2;width:105px;text-align:center;height:29px;line-height:29px;color:#4ca72d;display:block;font-size:12px;float:left;
</style>
</head>
<body>
<div class="tab-box">
<div class="btn clearfix">
<span>最新导读</span>
<span>热点关注</span>
<p style="clear:both;height:0;"></p>
</div>
</div>
</body>
</html>
