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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章