本文介绍了一个关于在Firefox浏览器中使用JavaScript控制HTML元素显示隐藏的问题。通过调整代码，解决了display:block在Firefox中不正常工作的问题。
菜单显示页，代码如下：
<html>
<head>
<title>display</title>
<script type="text/javascript">
<!--
function show(id){
var msg=document.getElementById("submenu"+id);
if(msg.style.display=="none")
msg.style.display="block";
else
msg.style.display="none";
}
//-->
</script>
</head>
<body>
<table width="100%" >
<tr width="100%">
<td width="100%">
<font style="cursor:hand;" onclick="show(1)">
菜单一
</font>
</td>
</tr>
<tr id="submenu1" style="display:none;">
<td>
<table>
<tr>
<td>子菜单a</td>
</tr>
<tr>
<td>子菜单b</td>
</tr>
</table>
</td>
</tr>
<tr width="100%">
<td width="100%">
<font style="cursor:hand;" onclick="show(2)">
菜单二
</font>
</td>
</tr>
<tr id="submenu2" style="display:none;">
<td>
<table>
<tr>
<td>子菜单c</td>
</tr>
<tr>
<td>子菜单d</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<html>
问题：
在Firefox中执行后"display:none;"没有回收"display:block;"开辟的页面空间，
下次再执行"display:block;"又会在页面上重新创建显示空间。
原因：
The reason it "appears" to work with IE is probably because IE is
error-correcting the display property for you.As others have implied,
IE has no concept of the table-row value. In fact,Microsoft's documentation
(<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp>)
clearly states that all block-like elements (with a few exceptions) have
'block' as their display value, contrary to specification.
解决：
将代码
msg.style.display="block";
修改为
msg.style.display="";
<html>
<head>
<title>display</title>
<script type="text/javascript">
<!--
function show(id){
var msg=document.getElementById("submenu"+id);
if(msg.style.display=="none")
msg.style.display="block";
else
msg.style.display="none";
}
//-->
</script>
</head>
<body>
<table width="100%" >
<tr width="100%">
<td width="100%">
<font style="cursor:hand;" onclick="show(1)">
菜单一
</font>
</td>
</tr>
<tr id="submenu1" style="display:none;">
<td>
<table>
<tr>
<td>子菜单a</td>
</tr>
<tr>
<td>子菜单b</td>
</tr>
</table>
</td>
</tr>
<tr width="100%">
<td width="100%">
<font style="cursor:hand;" onclick="show(2)">
菜单二
</font>
</td>
</tr>
<tr id="submenu2" style="display:none;">
<td>
<table>
<tr>
<td>子菜单c</td>
</tr>
<tr>
<td>子菜单d</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<html>
问题：
在Firefox中执行后"display:none;"没有回收"display:block;"开辟的页面空间，
下次再执行"display:block;"又会在页面上重新创建显示空间。
原因：
The reason it "appears" to work with IE is probably because IE is
error-correcting the display property for you.As others have implied,
IE has no concept of the table-row value. In fact,Microsoft's documentation
(<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp>)
clearly states that all block-like elements (with a few exceptions) have
'block' as their display value, contrary to specification.
解决：
将代码
msg.style.display="block";
修改为
msg.style.display="";
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
