我的網站在Firefox中看起來不太好

即時通訊工作在一個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。

來源

2011-07-26 JohnBigs

請儘量削減下來的問題。只要問題仍然存在，請刪除不相關的CSS和HTML。這將幫助你和我們隔離你的問題。 – Phrogz

相信我我會，問題是我不知道女巫部分是錯誤的這就是爲什麼即時消息共享所有這一切。抱歉給你帶來不便。 – JohnBigs

如果我明白這個問題：當你突出顯示一個菜單時，下面應該會出現一個黑框？你能澄清你到底想改變什麼嗎？ – chris

嘗試這樣：

HTML

<ul> 
    <li><a href='#' alt='Back to the homepage'><img src='' alt='Home'><span>Home</span></a></li> 
    <li><a href='' alt=''><img src='' alt=''/><span>Lorem</span></a></li> 
</ul>

CSS

#menu { display:block; padding:0 0 0 5px; background:#ccc; } 
#menu li { display:inline-block; padding:0 5px 0 0; height:20px; } 
#menu li a { position:relative; } 
#menu li a span { position:absolute; top:20px; } 
#menu li a:link span, 
#menu li a:visited span { display:none; } 
#menu li a:hover span, 
#menu li a:active span { display:block; }

來源

2011-07-26 13:51:26 sqwk

我認爲你的問題是與position: relative和position: absolute不同的元素。很難準確地看到（尤其是因爲我不確定黑匣子應該是哪個元素）。但是，我看到您爲position: relative指定了一個z-index元素，但這不起作用。我認爲發生的事情是絕對定位的元素在Chrome和IE中推動你的黑色小旗子，但不在Firefox中。如果可能，請嘗試將所有內容都轉換爲position: absolute - 這對我來說能夠解決FF問題。

另外，如果你給了一個URL，我相信有很多人會很樂意在firebug中玩它，直到它被修復。

來源

2011-07-26 13:50:46 NealJMD

我的網站在Firefox中看起來不太好

回答

相關問題