如下css代码为什么在火狐浏览器中无法正常显示，求高手修改！
<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><metana...
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>滑动</title>
<style type="text/css">
#header {
<!--background-color: #F8F4EF;-->
height: 300px;
width: 600px;
margin: 0px;
padding: 0px;
border-top: 1px solid #00ff00;
font-family: "宋体";
font-size: 12px;
}
#menu {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
display: block;
width: 100px;
text-align: center;
float: left;
margin: 0px;
padding-top: 0.2em;
padding-right: 0px;
padding-bottom: 0.2em;
padding-left: 0px;
cursor: hand;
}
.sec1 { background-color: #FFFFCC;}
.sec2 { background-color: #00CCFF;}
.block { display: block;}
.unblock { display: none;}
</style>
</head>
<body>
<script language=javascript>
function secBoard(n)
{
for(i=0;i<menu.childNodes.length;i++)
menu.childNodes[i].className="sec1";
menu.childNodes[n].className="sec2";
for(i=0;i<main.childNodes.length;i++)
main.childNodes[i].style.display="none";
main.childNodes[n].style.display="block";
}
</script>
<div id="header">
<ul id="menu">
<li onMouseOver="secBoard(0)" class="sec2">zzjs一号</li>
<li onMouseOver="secBoard(1)" class="sec1">zzjs二号</li>
<li onMouseOver="secBoard(2)" class="sec1">zzjs三号</li>
<li onMouseOver="secBoard(3)" class="sec1">zzjs四号帖</li>
<li onMouseOver="secBoard(4)" class="sec1">zzjs五号帖</li>
<li onMouseOver="secBoard(5)" class="sec1">zzjs六号帖</li>
</ul>
<!--内容显示区域-->
<ul id="main">
<li class="block">站长特效一号内容</li>
<li class="unblock">站长特效二号内容</li>
<li class="unblock">站长特效三号内容</li>
<li class="unblock">站长特效四号内容</li>
<li class="unblock">站长特效五号内容</li>
<li class="unblock">站长特效六号内容<br><br><br><br></li>
</ul>
<!--内容显示区域-->
</div>
</body>
</html> 展开
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>滑动</title>
<style type="text/css">
#header {
<!--background-color: #F8F4EF;-->
height: 300px;
width: 600px;
margin: 0px;
padding: 0px;
border-top: 1px solid #00ff00;
font-family: "宋体";
font-size: 12px;
}
#menu {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
display: block;
width: 100px;
text-align: center;
float: left;
margin: 0px;
padding-top: 0.2em;
padding-right: 0px;
padding-bottom: 0.2em;
padding-left: 0px;
cursor: hand;
}
.sec1 { background-color: #FFFFCC;}
.sec2 { background-color: #00CCFF;}
.block { display: block;}
.unblock { display: none;}
</style>
</head>
<body>
<script language=javascript>
function secBoard(n)
{
for(i=0;i<menu.childNodes.length;i++)
menu.childNodes[i].className="sec1";
menu.childNodes[n].className="sec2";
for(i=0;i<main.childNodes.length;i++)
main.childNodes[i].style.display="none";
main.childNodes[n].style.display="block";
}
</script>
<div id="header">
<ul id="menu">
<li onMouseOver="secBoard(0)" class="sec2">zzjs一号</li>
<li onMouseOver="secBoard(1)" class="sec1">zzjs二号</li>
<li onMouseOver="secBoard(2)" class="sec1">zzjs三号</li>
<li onMouseOver="secBoard(3)" class="sec1">zzjs四号帖</li>
<li onMouseOver="secBoard(4)" class="sec1">zzjs五号帖</li>
<li onMouseOver="secBoard(5)" class="sec1">zzjs六号帖</li>
</ul>
<!--内容显示区域-->
<ul id="main">
<li class="block">站长特效一号内容</li>
<li class="unblock">站长特效二号内容</li>
<li class="unblock">站长特效三号内容</li>
<li class="unblock">站长特效四号内容</li>
<li class="unblock">站长特效五号内容</li>
<li class="unblock">站长特效六号内容<br><br><br><br></li>
</ul>
<!--内容显示区域-->
</div>
</body>
</html> 展开
2个回答
展开全部
你写的东西不兼容.
火狐里面的的menu必须用document.getElementById('menu')来找,而不能直接用ID
找他的子节点用menu.getElementsByTagName('li')
修改如下 ,经过测试没有问题了
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>滑动</title>
<style type="text/css">
ul{ padding:0; margin:0;}
#header {
<!--background-color: #F8F4EF;-->
height: 300px;
width: 600px;
margin: 0px;
padding: 0px;
border-top: 1px solid #00ff00;
font-family: "宋体";
font-size: 12px;
}
#menu {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
display: block;
width: 100px;
text-align: center;
float: left;
margin: 0px;
padding-top: 0.2em;
padding-right: 0px;
padding-bottom: 0.2em;
padding-left: 0px;
cursor: hand;
}
.sec1 { background-color: #FFFFCC;}
.sec2 { background-color: #00CCFF;}
.block { display: block;background-color: #F8F4EF; height:100px;}
.unblock { display: none;background-color: #F8F4EF; height:100px;}
</style>
</head>
<body>
<script language=javascript>
function secBoard(n)
{
var menu=document.getElementById('menu')
var main=document.getElementById('main')
for(i=0;i<menu.getElementsByTagName('li').length;i++)
menu.getElementsByTagName('li')[i].className="sec1";
menu.getElementsByTagName('li')[n].className="sec2";
for(i=0;i<main.getElementsByTagName('li').length;i++)
main.getElementsByTagName('li')[i].style.display="none";
main.getElementsByTagName('li')[n].style.display="block";
}
</script>
<div id="header">
<ul id="menu">
<li onMouseOver="secBoard(0)" class="sec2">zzjs一号</li>
<li onMouseOver="secBoard(1)" class="sec1">zzjs二号</li>
<li onMouseOver="secBoard(2)" class="sec1">zzjs三号</li>
<li onMouseOver="secBoard(3)" class="sec1">zzjs四号帖</li>
<li onMouseOver="secBoard(4)" class="sec1">zzjs五号帖</li>
<li onMouseOver="secBoard(5)" class="sec1">zzjs六号帖</li>
</ul>
<!--内容显示区域-->
<ul id="main">
<li class="block">站长特效一号内容</li>
<li class="unblock">站长特效二号内容</li>
<li class="unblock">站长特效三号内容</li>
<li class="unblock">站长特效四号内容</li>
<li class="unblock">站长特效五号内容</li>
<li class="unblock">站长特效六号内容<br><br><br><br></li>
</ul>
<!--内容显示区域-->
</div>
</body>
</html>
火狐里面的的menu必须用document.getElementById('menu')来找,而不能直接用ID
找他的子节点用menu.getElementsByTagName('li')
修改如下 ,经过测试没有问题了
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>滑动</title>
<style type="text/css">
ul{ padding:0; margin:0;}
#header {
<!--background-color: #F8F4EF;-->
height: 300px;
width: 600px;
margin: 0px;
padding: 0px;
border-top: 1px solid #00ff00;
font-family: "宋体";
font-size: 12px;
}
#menu {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
display: block;
width: 100px;
text-align: center;
float: left;
margin: 0px;
padding-top: 0.2em;
padding-right: 0px;
padding-bottom: 0.2em;
padding-left: 0px;
cursor: hand;
}
.sec1 { background-color: #FFFFCC;}
.sec2 { background-color: #00CCFF;}
.block { display: block;background-color: #F8F4EF; height:100px;}
.unblock { display: none;background-color: #F8F4EF; height:100px;}
</style>
</head>
<body>
<script language=javascript>
function secBoard(n)
{
var menu=document.getElementById('menu')
var main=document.getElementById('main')
for(i=0;i<menu.getElementsByTagName('li').length;i++)
menu.getElementsByTagName('li')[i].className="sec1";
menu.getElementsByTagName('li')[n].className="sec2";
for(i=0;i<main.getElementsByTagName('li').length;i++)
main.getElementsByTagName('li')[i].style.display="none";
main.getElementsByTagName('li')[n].style.display="block";
}
</script>
<div id="header">
<ul id="menu">
<li onMouseOver="secBoard(0)" class="sec2">zzjs一号</li>
<li onMouseOver="secBoard(1)" class="sec1">zzjs二号</li>
<li onMouseOver="secBoard(2)" class="sec1">zzjs三号</li>
<li onMouseOver="secBoard(3)" class="sec1">zzjs四号帖</li>
<li onMouseOver="secBoard(4)" class="sec1">zzjs五号帖</li>
<li onMouseOver="secBoard(5)" class="sec1">zzjs六号帖</li>
</ul>
<!--内容显示区域-->
<ul id="main">
<li class="block">站长特效一号内容</li>
<li class="unblock">站长特效二号内容</li>
<li class="unblock">站长特效三号内容</li>
<li class="unblock">站长特效四号内容</li>
<li class="unblock">站长特效五号内容</li>
<li class="unblock">站长特效六号内容<br><br><br><br></li>
</ul>
<!--内容显示区域-->
</div>
</body>
</html>
参考资料： http://www.l-dan.com
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
