一直很想问大家的问题,是关于菜单和浏览器的问题

Question

http://61.139.52.111:8090/kj/Manfeel/w3pop/snazzymenu.asp.htm
可爱的圆角菜单
=============================================================
在我的网站里采用了这个菜单,但是存在一个问题,就是在VISTA的IE7里不能正常显示,请问这个问题我该怎么处理好!这个菜单真的很漂亮,我真的很想用他!!!
如果你用的是VISTA的IE7可以到我的网站上看看效果,菜单就在网页的顶部,但你却很发现,因为它不能正常显示.
www.txgaozhao.com

Answer 1

<style type="text/css">
/*定义菜单的主框架*/
#outer ul {margin:3em; padding:0; list-style-type:none; background:transparent; height:3em;}
/*菜单选项向左浮动，达到水平效果*/
#outer li {display:block; float:left;}
/*这个outer是外面灰色的div部分，可以改成别的颜色*/
#outer {display:block; position:relative; background:#eee; padding:2em;}
/*菜单顶上部分区域框定（放置圆角）*/
.xsnazzy {background:transparent;}
.xsnazzy span {text-align:center; color:#fff; margin:0; font-weight:normal; padding-bottom:0.5em;}
.xtop {display:block; background:transparent; font-size:1px;}
/*圆角效果，每两个class出一个角，再下面的是hover的改变效果*/
.xb1, .xb2, .xb3, .xb4 {
display:block;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#dd7; border-left:1px solid #fff; border-right:1px solid #fff;}
.xb1 {margin:0 5px; background:#fff;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
/*菜单内容*/
.xboxcontent {display:block; background:#cc6; border:0 solid #fff; border-width:0 1px 1px 1px;}
a.xmenu2, a.xmenu2:visited {display:block; text-decoration:none; width:7em; font-size:0.9em;}
a.xmenu2:hover {background:transparent; cursor:pointer;}
a.xmenu2:hover span {color:#000;}
a.xmenu2:hover .xboxcontent {background:#eee; border-color:#888; border-bottom:1px solid #eee;}
a.xmenu2:hover .xb1 {background:#888;}
a.xmenu2:hover .xb2, a.xmenu2:hover .xb3, a.xmenu2:hover .xb4 {background:#fff; border-color:#888;}
</style>
=================================================================================
发现不是浏览器的问题,而是我的使用不当的问题,因为我要在很多个页面用到这个菜单,所以我把这个菜单放在了一个用户控件里head.ascx.放在了用户控件里就会出现这个问题.原因可能是我把这个css也放在了用户控件里了吧.
请问假如我要把这个css放在一个head.css,请问我应该怎么修改这个css