如何修改样式。img

ff3下是我想要的效果
但是在ie6下就是乱78糟的
该如何修改了,各位前辈指教下吧......................
<!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">
#ss{
width:330px;
height:28px;
background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090916/112604234.p.gif);
font-size:13px;
}
#ss a{
color:#FFFFFF;
display:block;
height:28px;
width:80px;
float:left;
line-height:28px;
vertical-align:middle;
text-align:center;
text-decoration:none;
}
#ss a:hover{
color:#1f3a87
}
#ss a img{
vertical-align:text-bottom;
border:0px;
margin-right:5px;
}
</style>
</head>
<body>
<div id='ss'>
<a href = "javascript:void(0)"><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090916/112321656.p.gif'>人族</a>
<a href = "javascript:void(0)"><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090916/112321656.p.gif'>兽族</a>
<a href = "javascript:void(0)"><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090916/112321656.p.gif'>不死族</a>
<a href = "javascript:void(0)"><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090916/112321656.p.gif'>精灵族</a>
</div>
</body></html>

解决方案 »

  1.   

    你俩双胞胎啊``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">
    #ss{
    width:330px;
    height:28px;
    background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090916/112604234.p.gif);
    font-size:13px;
    }
    #ss a{
    color:#FFFFFF;
    display:block;
    height:28px;
    width:80px;
    float:left;
    line-height:28px;
    vertical-align:middle;
    text-align:center;
    text-decoration:none;
    }
    #ss a:hover{
    color:#1f3a87
    }
    #ss a img{
    vertical-align:text-bottom;
    border:0px;
    margin-right:5px;
    padding-top:5px;
    }
    </style>
    </head>
    <body>
    <div id='ss'>
        <a href = "javascript:void(0)"><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090916/112321656.p.gif'>人族</a>
        <a href = "javascript:void(0)"><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090916/112321656.p.gif'>兽族</a>
        <a href = "javascript:void(0)"><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090916/112321656.p.gif'>不死族</a>
        <a href = "javascript:void(0)"><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090916/112321656.p.gif'>精灵族</a>
    </div>
    </body></html>
      

  2.   

    参考：BUG症状：当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效；受影响的浏览器：
    Microsoft Internet Explorer 5.01 / Windows
    Microsoft Internet Explorer 5.5 / Windows
    Microsoft Internet Explorer 6 解决方法：
    对和文字相连接的img、input、textarea、select、object等元素加以属性margin: (所属line-height-自身高度)/2px 0; 
    vertical-align:middle