如何修改样式 line and border

代码如下  ie下是错的
ff 和chrome下是对的   
如何修改样式了  
<!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">
body{
font-size:12px;
}
#cc{
height:auto;
width:500px;
}
#t{
width:auto;
list-style-type : none;
height:29px;
padding:0px;
margin:0px;
}
#t li{
float:left;
position:relative;
height:28px;
width:100px;
border:1px solid #0000FF;
margin-right:5px;
text-align:center;
line-height:28px;
vertical-align:middle;
z-index:2;
background-color:#FFFFFF;
border-bottom: 0px;; 
}
#t li.hover {
background-color:#FFFF00;
}
#t li.active {
color:#990000;
height:29px;
}
#c{
height:300px;
width:100%;
}
#c div{
border:1px solid #0066FF;
height:300px;
}
</style>
</head>
<body>
<div id='cc'>
    <ul id='t'>
        <li class="active" onclick="ss(this,0)">人族</li>
        <li onclick="ss(this,1)">兽族</li>
        <li onclick="ss(this,2)">不死族</li>
        <li onclick="ss(this,3)">精灵族</li>
    </ul>
    <div id='c'>
        <div >
        11111111
        </div>
        <div style="display:none">
         2222
        </div>
        <div style="display:none">
        3333
        </div>
        <div style="display:none">
            444
        </div>                    
    </div>
</div>    
<script language="javascript">
var id=document.getElementById('t').getElementsByTagName('li')[0];
function ss(o,i){
 id.className = "";
 o.className ="active";
 id=o;
}
</script>
</body>
</html>

解决方案 »

  1.   

    在ie7 ,8上测试了一下
    还好
    好象就是ie6下面有问题
    该如何修改了?????????????
      

  2.   

    51上的一位兄弟改的  写法挺另类的  值得学习
    测试了一下 好象ie6  ie7 ie8 ff3.5 chrome都是对(如果哪为兄弟发现不对，告诉小弟一下)
    哪位兄弟进来一下   方便结帖........
    <!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">
    body{
    font-size:12px;
    }
    #cc{
    height:auto;
    width:500px;
    }
    #t{
    width:auto;
    list-style-type : none;
    height:29px;
    padding:0px;
    margin:0px;
    }
    #t li{
    float:left;
    position:relative;
    height:28px;
    width:100px;
    border:1px solid #0000FF;
    margin-right:5px;
    text-align:center;
    line-height:28px;
    vertical-align:middle;
    z-index:2;
    background-color:#FFFFFF;
    border-bottom: 0px;; 
    }
    #t li.hover {
    background-color:#FFFF00;
    }
    #t li.active {
    color:#990000;
    height:29px;
    }
    #c{
    height:300px;
    width:100%;
                   _position:relative;
                   _top:-1px;
    }
    #c div{
    border:1px solid #0066FF;
    height:300px;
    }
    </style>
    </head>
    <body>
    <div id='cc'>
        <ul id='t'>
            <li class="active" onclick="ss(this,0)">人族</li>
            <li onclick="ss(this,1)">兽族</li>
            <li onclick="ss(this,2)">不死族</li>
            <li onclick="ss(this,3)">精灵族</li>
        </ul>
        <div id='c'>
            <div >
           123
            </div>
            <div style="display:none">
         123
            </div>
            <div style="display:none">
         123
            </div>
            <div style="display:none">
          123
            </div>                    
        </div>
    </div>    
    <script language="javascript">
    var id=document.getElementById('t').getElementsByTagName('li')[0];
    function ss(o,i){
     id.className = "";
     o.className ="active";
     id=o;
    }
    </script>
    </body>
    </html>
      

  3.   

    我来了...
    css布局还得多像桃子学习啊
      

  4.   

    根据你的代码稍微改了下！！
    <!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">
    body{
    font-size:12px;
    }
    #cc{
    height:auto;
    width:500px;
    }
    #t{
    position:absolute;
    z-index:5;
    width:auto;
    list-style-type : none;
    height:29px;
    padding:0px;
    margin:0px;
    }
    #t li{
        float:left;
        position:relative;
        height:28px;
        width:100px;
        border:1px solid #0000FF;
        margin-right:5px;
        text-align:center;
        line-height:28px;
        vertical-align:middle;
        z-index:2;
        background-color:#FFFFFF;
        border-bottom: 0px;; 
    }
    #t li.hover {
        background-color:#FFFF00;
    }
    #t li.active {
    color:#990000;
    height:29px;
    }
    #c{ position:absolute;
    z-index:0;
    margin-top:29px;
    height:300px;
        width:100%;
    }
    #c div{
        border:1px solid #0066FF;
        height:300px;}
    </style>
    </head>
    <body>
    <div id='cc'>
        <ul id='t'>
            <li class="active" onclick="ss(this,0)">浜烘棌</li>
            <li onclick="ss(this,1)">鍏芥棌</li>
            <li onclick="ss(this,2)">涓嶆鏃?/li>
            <li onclick="ss(this,3)">绮剧伒鏃?/li>
        </ul>
        <div id='c'>
            <div >
            11111111
            </div>
            <div style="display:none">
             2222
            </div>
            <div style="display:none">
            3333
            </div>
            <div style="display:none">
                444
            </div>                    
        </div>
    </div>    
    <script language="javascript">
    var id=document.getElementById('t').getElementsByTagName('li')[0];
    function ss(o,i){
         id.className = "";
         o.className ="active";
         id=o;
    }
    </script>
    </body>
    </html>