日期:2014-05-17  浏览次数:20807 次

淘宝list上下跳动问题
淘宝list上下跳动问题
参考淘宝产品页:http://item.taobao.com/item.htm?id=13978697978

HTML code

<!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>
<title>page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<style type="text/css">
    *{margin:0;padding:0;}
    body{
        padding:50px;
    }
    .clearfix{
        *zoom:1;
    }
    .clearfix:after{
        content:'\20';
        display:block;
        height:0;
        clear:both;
    }
    .taobao_list{
        clear:both;
        float:left;
    }
    .taobao_list li{
        position:relative;
        display:inline;
        float:left;
        margin:0 4px 4px 0;
        padding:1px;
        line-height:20px;
        vertical-align:middle;
        background:#fff;
    }
    .taobao_list li a{
        display:inline-block;
        min-width:10px;
        padding:0 6px;
        text-align:center;
        white-space:nowrap;
        text-decoration:none;
        color:#000;
        background:#fff;
        border:1px solid #C8C9CD;
        _width:10px;
    }
    .taobao_list li a:hover{
        margin:-1px;
        border:2px solid #FF6701;    
    }
</style>
<ul class="taobao_list clearfix">
    <li><a href="#"><span>hello</span></a></li>
    <li><a href="#"><span>hello</span></a></li>
    <li><a href="#"><span>hello</span></a></li>
    <li><a href="#"><span>hello</span></a></li>
    <li><a href="#"><span>hello</span></a></li>
</ul>
<ul class="taobao_list clearfix">
    <li><a href="#"><span>hello</span></a></li>
    <li><a href="#"><span>hello</span></a></li>
    <li><a href="#"><span>hello</span></a></li>
    <li><a href="#"><span>hello</span></a></li>
    <li><a href="#"><span>hello</span></a></li>
</ul>


</body>
</html>






------解决方案--------------------
ie ff字体默认大小不一致
*{margin:0;padding:0; font-size:12px; }