如下css代码为什么用火狐浏览器无法正确显示

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

举报该文章

相关建议推荐于2016-01-21

楼主,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>

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/8pmv2p8p2.html

其他看法

第1个回答 2014-03-20

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

第2个回答 2011-10-14

-_,-@ 先把CSS基础学好……
注释都写错……

急救啊我的css样式为啥在火狐浏览器中不能使用在其他的浏览器没有...
1、典型的css兼容问题，即该组css样式中使用了火狐浏览器不兼容的属性，导致样式无法生效；2、火狐浏览器的误设置，将css样式关闭。开启方式：菜单->查看->页面样式，选择为“基本页面样式”即可。

调用的css样式后,火狐浏览器不起作用
1、最新版的火狐浏览器是完全遵循w3c标准的，所以检查一下火狐浏览器的版本是不是太低，如果太低请升级到最新版本。2、不生效一般是引用的样式方法错误或者其他代码的语法错误。正常的引用css的样式的方法常见的有内嵌式和外连式，如下：外连式：...

火狐不显示css样式,放360浏览器正常显示,代码如下
尊敬的用户，您好！很高兴为您答疑。因为火狐不支持xml中CSS的ID选择器，故您无法通过ID值进行样式定义，class和id的用途是不一样的，不带#时，既是class，是对html标记选择器的一种扩展，CLASS可以给多个标记反复利用。而ID的目的在于单独进行样式定义，一般多在Javascript改变样式中使用，来动态改变外观。

为什么下列css布局代码会在火狐浏览器里出现错误?求解决...
不同的浏览器里浏览div的位置会发生位移的，scc里面有的有些代码和效果也不是所有的浏览器都支持的，不过像你在样乱应该不怪浏览器你仔细检查一下代码，或者换一个浏览器看看，

MIME类型导致css在Firefox下无效要怎么解决
AddType text\/：解决这个问题的一种方法是联系服务器管理员将.css 这样一来。对于诸如网络服务器或者浏览器程序来说.css的文件扩展名;css”类型来编译，这个样式表文件带有;html”.htaccess文件，那么你就需要联系他(她)以取得权限修改这一MIME类型：MIME是多用途的网际邮件扩充协议的缩写，按照MIME类型将...

为什么我的CSS样式表在火狐游览器里没有起来作用?
现在大部分都是用!important.hack，对于firefox测试可以正常显示，现在写一个CSS可以这样：1 { color: #333; } \/* Moz *\/ html #1 { color: #666; } \/* IE6 *\/ +html #1 { color: #999; } \/* IE7 *\/ 那么在firefox下字体颜色显示为#333。火狐浏览器使用的是Gecko内核，是一款开源、...

外部CSS样式表在火狐浏览器里不起作用
导致此问题有2种可能：1、设置的样式被强替换，覆盖失效。要验证该问题可以在元素上右击，然后选择“查看元素”即可进入调试界面，在“样式”面板下会显示作用域的css属性及其值，未生效的样式代码也会以删除线标注出来；2、浏览器设置问题，关闭了页面样式。开启路径：菜单->查看->页面样式，选择设置为...

...能正常显示,在火狐上就不能正常显示了,这是为什么
您所说的情况叫做兼容问题。此类兼容问题一般分2种。1是样式兼容，1是js脚本兼容。您的情况有可能兼有这2种情况。一般的做法是使用火狐浏览器的元素查看器，通过分析元素的嵌套关系，分析出究竟是哪个层级的样式导致的显示异常，然后基于此进行修复。如果对我们的回答存在任何疑问，欢迎继续问询。

我的网站是用div+css做的,在IE7.0里显示正常,在火狐里就乱了,
而FF就可以解析第二个样式，根据最近原则，在FF中，字体的颜色是红色的。*\/ \/\/利用这个区别你就可以编写不同的样式来适应不用的浏览器。\/\/由于FF和IE的边距等一些内容的默认值不一样，建议你看看《css网站布局实录》这本书，上面讲的比较详细。参考资料：《CSS网站布局实录》...

相似回答

大家正在搜