HTML很简单:
<div id="locationArea"> <div id="locationBlock"> 当前位置:<A href="index.asp">首页</A></div> <div id="onlineUserBlock">xx</div> <div id="otherBlock"> <a href="$" onClick="showHiddenFunctionMenu();return false;" title="打开/关闭功能菜单"><IMG src="images/show-hide.gif" alt="打开/关闭功能菜单" width="15" height="14" border="0" align="absmiddle">Menu</a> </div> </div>
改了半天,CSS改成如下:
#locationArea{ width:760px; height:22px; margin:0 auto; text-align:left; background-color:#FBF0F0; border-bottom:1px solid #990000; vertical-align:middle; line-height:22px; } /*共三个块:当前位置,在线用户,小图片*/ #locationBlock{ width:490px; height:100%; float:left; } #onlineUserBlock{ width:220px; height:100%; float:left; } #otherBlock{ width:50px; height:100%; float:left; }
其中用了: vertical-align:middle; line-height:22px; 来实现垂直居中,但是发现FireFox中效果很好……
而IE则otherBlock没有居中,始终在靠上。
折腾半天,发现把链接中那个IMG去掉就能居中……
所以,直接咔嚓掉,CSS增加一个:
#otherBlock A{ /* 显示隐藏功能菜单*/ width:100%;height:100%; background:url(images/show-hide.gif) no-repeat left center; padding-left:15px; }
恩,问题解决!
|