CSS覆盖菜单在firefox中不工作

CSS overlay menu not working in firefox

本文关键字：工作 firefox 覆盖 菜单 CSS      更新时间：2023-09-26

我有这样的代码

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关闭，我通过显示隐藏javascript函数做到这一点。两个问题是，当我在firefox中加载它时，它还不能工作，它在我尝试过的所有其他浏览器(Safari, Chrome, Rekonq)中都可以工作另外，我如何隐藏它默认而不是onload?

示例:http://jsfiddle.net/msZVY/3/

在Firefox控制台中，Firefox不知道"uni"是什么。函数dispHandle(uni)表示"执行dsipHandle函数，参数具有对象uni"。未定义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放在引号里。onmouseover="dispHandle('uni')"代替onmouseover="dispHandle(uni)"

要回答你关于除了onload之外还有其他隐藏方式的问题，你可以使用常规的css:

#uni{display:none}

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

相关文章：