javascript - CSS覆盖菜单在Firefox中不起作用

我有这个代码

style.css

.row {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 22px;
    width: 100%;
    background: black;
    color: white;
    padding: 0px;
}

.content {
    margin-top: 22px;
    padding: 10px;
}

div.navigation span.left {
  float: left;
  text-align: left;
  font-weight: bold;
  width: 49%;
  }

div.navigation span.right {
  float: right;
  text-align: right;
  font-weight: bold;
  width: 49%;
  }

.menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: black;
    color: white;
    padding: 10px;
opacity:0.9;
display: ;
}

navigation.htm

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Home</title>
<link rel="StyleSheet" href="style.css" type="text/css">
<script type="text/javascript">
function dispHandle(obj)
{
if (obj.style.display == "none")
obj.style.display = "";
else
obj.style.display = "none";
}

</script>
</head>
<body onload="dispHandle(uni);">
<div class="navigation">
<div id="container" style="width: 100%;">
<div class="row"> <span class="left"><a onmouseover="dispHandle(uni)">Activities</a><img
style="width: 18px; height: 18px;" alt="" src="images/void.png"></span>
<span style="font-weight: bold;" class="right"><img
style="width: 18px; height: 18px;" alt="" src="images/volume.png"><img
style="width: 18px; height: 18px;" alt="" src="images/bluetooth.png"><img
style="width: 18px; height: 18px;" alt="" src="images/wireless.png"><img
style="width: 26px; height: 18px; font-style: italic;" alt=""
src="images/battery.png"><iframe
src="http://free.timeanddate.com/clock/i2vrnsgh/fcfff/tct/pct/ftb"
allowtransparency="true" frameborder="0" height="18" width="86"></iframe><img
style="width: 18px; height: 18px;" alt="" src="images/user.png">Demi
Lovato&nbsp;</span>
</div>
</div>
</div>
<div id="uni">
<div style="text-align: center;" class="menu"> <br>
<img onclick="dispHandle(uni)"
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
    src="http://demilovato.sourceforge.net/images/close.png"><br>
<br>
<div align="center">
<table style="text-align: left; width: 410px; height: 268px;" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><a
href="index.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/Home.png"></a><br>
Home<br>
</td>
<td style="vertical-align: top; text-align: center;"><a
href="Downloads.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/Downloads.png"></a><br>
Downloads<br>
</td>
<td style="vertical-align: top; text-align: center;"><a
href="Screenshots.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/Screenshots.png"></a><br>
Screenshots<br>
</td>
<td style="vertical-align: top; text-align: center;"><a
href="Links.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/Links.png"></a><br>
Links<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;"><a
href="FAQ.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/FAQ.png"></a><br>
FAQ<br>
</td>
<td style="vertical-align: top; text-align: center;"><a
href="Contact.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/Contact.png"></a><br>
Contact<br>
</td>
<td style="vertical-align: top; text-align: center;"><a
href="About.htm"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="images/About.png"></a><br>
About<br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
<br>
</div>
</div>
</div>
</body>
</html>

它应该能够将鼠标悬停在“活动”上，并且显示全屏CSS菜单
然后单击“ X”关闭。我可以通过show hide javascipt函数执行此操作。
两个问题是，当我将其加载到firefox中时，它无法正常工作，但在我尝试过的所有其他浏览器（Safari，Chrome，Rekonq）中都可以正常工作
另外，如何默认隐藏它而不是onload？

最佳答案

此处的示例解决方案：http://jsfiddle.net/msZVY/3/

如Firefox控制台中所述，Firefox不知道什么是“ uni”。函数dispHandle(uni)说“使用具有对象uni的参数执行dsipHandle函数”。 uni未定义。

我不确定为何Safari / Chrome可以“更智能”，并看到uni是元素的ID。（也许其他人可以启发我），但是对于Firefox，您应该使用以下命令明确声明：

function dispHandle(id)
{
  obj = document.getElementById(id);  //define obj using the id
  if (obj.style.display == "none")
    obj.style.display = "block";
  else
    obj.style.display = "none";
}

在您的内联javascript中，您应在uni引号中加上uni。 onmouseover="dispHandle('uni')"代替onmouseover="dispHandle(uni)"

要回答有关onload以外的另一种隐藏方法的问题，您可以使用常规CSS来做到这一点：

#uni{display:none}

在上面的函数中，我还将其从obj.style.display = "";更改为obj.style.display = "block";，因为这将在样式表中将其显式更改为div的默认块显示，从而覆盖了您的style.css