即时通讯工作在一个web应用程序上,我的代码在Chrome和Explorer中运行良好,但是在Firefox上它给我带来麻烦。 我添加了一个链接到一个屏幕截图,所以你可以看到菜单的外观(黑色CSS盒子应该是菜单下): link to see the menu我的网站在Firefox中看起来不太好
这是我的风格的CSS:
/- 菜单 - -/
#menu { height:39px; position:relative; float:right; margin-top:33px; background:url(../images/menu/bg.jpg) repeat-x; }
#menu-left { width:8px; height:38px; position:relative; z-index:10; float:left; background:url(../images/menu/menu-sx.jpg); }
##menu-right { width:8px; height:38px; position:relative; z-index:10; float:right; background:url(../images/menu/menu-dx.jpg); }
.menu-item { float:left; position:relative; z-index:100; cursor:pointer; }
#menu-name { float:left; padding-top:10px; padding-right:11px; font-size:10pt; color:#FFF; text-shadow:#001F2E 0px -1px; }
#menu-rollover-left { width:98px; height:38px; position:absolute; top:0; left:0; z-index:0; background:url(../images/menu/rollover-left.jpg); }
#menu-rollover-right { width:86px; height:38px; position:absolute; top:0; right:0; z-index:0; background:url(../images/menu/rollover-right.jpg); }
/*-- Menu labels --*/
.label { height:34px; position:absolute; top:103px; z-index:200; opacity:0; filter:alpha(opacity=0); }
.label-left { width:9px; height:34px; float:left; background:url(../images/menu/label-left.jpg); }
.label-right { width:9px; height:34px; float:left; background:url(../images/menu/label-right.jpg); }
.label-center { height:34px; float:left; background:url(../images/menu/label-center.jpg) center; }
.label-center span { position:relative; top:7px; font-size:8pt; color:#FFF; text-shadow:#000 0px -1px; }
/*-- Notifications flag --*/
#header a { text-decoration:none;}
#red-flag { width:27px; height:51px; position:absolute; top:33px; right:62px; z-index:300; background:url(../images/menu/red-flag.png); font-size:9pt; color:#FFF; text-shadow:#3B0001 0px -1px; text-align:center; line-height:67px; cursor:pointer; }
,这是我的html代码:
<div id="menu">
<div id="menu-left"></div>
<a href="/doweets/index"><div id="home-btn" class="menu-item" onmouseover="RollMenu(this, event);" onmouseout="RollMenu(this, event);"><img src="/images/menu/home.jpg" /></div></a>
<a href="/calendar/week"><div id="calendar-btn" class="menu-item" onmouseover="RollMenu(this, event);" onmouseout="RollMenu(this, event);"><img src="/images/menu/calendar.jpg" /></div></a>
<a href="/findfriends"><div id="addfriends-btn" class="menu-item" onmouseover="RollMenu(this, event);" onmouseout="RollMenu(this, event);"><img src="/images/menu/addfriends.jpg" /></div></a>
<div class="menu-item"><img src="/images/menu/line.jpg" /></div>
<div id="menu-name"><%= current_user.name %></div>
<a href="/notifications/index"><div id="notifications-btn" class="menu-item" onmouseover="RollMenu(this, event);" onmouseout="RollMenu(this, event);"><img src="/images/menu/notifications.jpg" /></div></a>
<a href="https://stackoverflow.com/users/edit"><div id="settings-btn" class="menu-item" onmouseover="RollMenu(this, event);" onmouseout="RollMenu(this, event);"><img src="/images/menu/settings.jpg" /></div>
<a href="https://stackoverflow.com/users/sign_out"><div id="logout-btn" class="menu-item" onmouseover="RollMenu(this, event);" onmouseout="RollMenu(this, event);"><img src="/images/menu/logout.jpg" /></div></a>
<div id="menu-right"></div>
<!-- Rollover states -->
<div id="menu-rollover-left"></div>
<div id="menu-rollover-right"></div>
</div>
<!-- Notifications flag -->
<a href="/notifications/index"><div id="red-flag" onmouseover="RollMenu(this, event);" onmouseout="RollMenu(this, event);">
<%= count %>
<% if count == 0 %>
<script>$("#red-flag").css("display", "none");</script>
<% end %>
</div></a>
在索姆e页面的菜单它根本无法工作。 谢谢大家。 Nir。
请尽量削减下来的问题。只要问题仍然存在,请删除不相关的CSS和HTML。这将帮助你和我们隔离你的问题。 – Phrogz
相信我我会,问题是我不知道女巫部分是错误的这就是为什么即时消息共享所有这一切。抱歉给你带来不便。 – JohnBigs
如果我明白这个问题:当你突出显示一个菜单时,下面应该会出现一个黑框?你能澄清你到底想改变什么吗? – chris