如下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 {

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> 展开

 我来答

3个回答

#热议# 什么是淋病？哪些行为会感染淋病？

楚昂熙xE
推荐于2016-01-21 · TA获得超过2624个赞

知道小有建树答主

回答量：1478

采纳率：40%

帮助的人：957万

我也去答题访问个人页

关注

展开全部

楼主,css里的注释与html的注释方式是不同的。
html里用来注释冲辩姿。而css里是用/*aaaaa*/这样的方式来注释的。
所以你上面代码里：
这个是错误的。
另外，建议你的html使用doctype，比如一般会用以下doctype:
<!DOCTYPE html PUBLIC "-//W3C//灶裂DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
而不要像你现在代码这样只写<html>，习惯了使用doctype，对你写标准页面有好处的。。。

你所说的错误，我已经帮你检查过，并修复了。
错误的地方有2个：
一、火狐对childNodes的支持不好，火狐下使用childNodes.length得到的长度与ie下得到的长度不相同，因此你上面的代码就会出错。
二、你的js中，menu,main直接就写上去了，从哪里得到这个menu,main?IE下没问题，火狐下就不行的了。

另外，你的css中，有些地方可以精简的代码，比如padding-top,padding-right,padding-bottom,padding-left这四句，你只写成一句就行了：padding:0.2em 0;
还有cursor这个鼠标手势的手型，标准的写法是：cursor:pointer，而不要写成cursor:hand;
hand只是ie下可用，不是标准的写法

以下是正确的代码，我测试并运行，IE7，火狐5.0都OK。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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 {
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:none;
}

#menu li {
float: left;
width: 100px;
text-align: center;
margin: 0px;
padding:2px 0;
cursor:pointer;
}

.sec1 { background-color: #FFFFCC;}
.sec2 { background-color: #00CCFF;}
.block { display: block;}
.unblock { display: none;}
</style>
<script language=javascript>
function secBoard(n)
{
var menu=document.getElementById("menu").getElementsByTagName("li");
for(i=0;i<menu.length;i++)
{
menu[i].className="sec1";
}
menu[n].className="sec2";

var main=document.getElementById("main").getElementsByTagName("li");
for(i=0;i<main.length;i++)
{
main[i].className="unblock";
}
main[n].className="block";
}
</script>
</head>
<body>
<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>

已赞过 已踩过<

评论收起

青岛星科云网络科技

广告2024-12-14

新双核升级，专为视频观看设计，强力兼容各大网站，双核切换视频路径，秒开无卡顿安全屏蔽弹窗，广告，恶意连接，2024新升级新享受

www.xingkeyun.com.cn

火狐
2014-03-20 · Firefox，最快最安全的上网体验

火狐

Mozilla Firefox火狐浏览器，是一款开放安全的开源浏览器，全球拥有5亿用户。

向TA提问

关注

展开全部

　　您好！很高兴为您答疑。
　　通过走读您的代滑笑码，发现您芦让穗的代码主要的问题在于执行顺序上。html中的代码输出，其实可以视为js中的对象定义，故您的js脚本必须移动到您的id对象输出（建立）之后执行方可生效。而这一特性在ie下不甚敏感，故会造成此兼容差异陪卜。
　　另外，css中的注释码应该是/*，而非<!-- *** -->，请您注意。
　　如果对我们的回答存在任何疑问，欢迎继续问询。

本回答被网友采纳

已赞过已踩过<

你对这个回答的评价是？
评论收起