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>
但是在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>
<!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>
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