网站在Mozilla Firefox中无法正常显示 [英] Site not appearing properly in Mozilla Firefox
问题描述
我有一个在IE和Netscape中都能正常显示的网站，因为它在Mozilla Firefox中有各种各样的外观问题。我在网上寻找了一些有助于解释这个问题的观点，但迄今为止一无所获。我已经得出结论，问题必须是CSS问题。
这里是网站地址。它目前正在Tripod托管，直到我们得到一些错误并将其放在最终的托管网站上：
http://rsteph49.tripod.com/ default.shtml
这是'当前使用的样式表：
/ * css样式表* /
身体{
保证金：10px 10px 0px 10px;
填充：0px;
}
/ * ===================================== ============= =================== * /
/ *特定DIV * /
#bannercontent {
职位：绝对;
剩余：190px;
top：10px;
身高：226px;
宽度：900px;
voice-family：" \"} \"";
语音家庭：继承;
z-index：1;
}
html> body #bannercontent {
身高：200px;
}
#menucontent {
职位：绝对;
left：190px;
顶部：236px;
宽度：900px;
身高：30px;
background-image：URL（images / images menu04.png）;
z-index：3;
}
#bodycontent {
位置：绝对;
左：190px;
顶部：266px;
身高：1000px;
宽度：900px;
voice-family：" \"} \"" ;;
voice-family：inherit;
background-image：URL（images / marb009.jpg）;
z-index：1;
}
html> body #bodycontent {
身高：800px;
}
#footer {
职位：绝对;
左：190px;
顶部：1266px;
身高：40px;
宽度：900px;
voice-family：" \"} \""
voice-family：inherit;
background-image：URL（ images / menu04.png）;
z-index：1;
}
html> body #footer {
身高：40px;
}
#groupItem {
身高：80px;
border： 1px solid＃000;
voice-family：" \"} \"" ;;
voice-family：inherit;
身高：80px;
宽度：800px;
z-index：2;
}
html> body #footer {
身高：80px;
}
#datetime {
font-family：arial;
font-size：14pt;
font-weight：900;
color：#ffffff;
z-index：3;
}
/ * ================ ================================== ================ === * /
/ *字体元素* /
#bannercontent h1 {
字体大小：58px;
填充：10px 10px 0px 10px;
保证金：0px;
颜色：＃000000;
}
#bodycontent h1 {
font-size：36px;
padding：10px 10px 0px 10px;
保证金：0px;
颜色：＃000000;
}
#bodycontent p {
字体大小：16px;
填充：10px 10px 0px 10px;
保证金：0px;
颜色：＃000000;
}
#bodycontent h5 {
font-weight：bold;
font-size：16px;
padding：10px 10px 0px 10px;
保证金：0px;
颜色：＃000000;
}
#bodycontent li {
字体大小：18px;
填充：10px 10px 0px 10px;
保证金：0px;
颜色：＃000000 ;
}
#menucontent h1 {
字体大小：36px;
填充： 10px 10px 0px 10px;
保证金：0px;
颜色：＃000000;
}
#menucontent p {
字体大小：16px;
填充：10px 10px 0px 10px;
保证金：0px;
颜色：＃000000;
}
#footer p {
字体大小：16px;
填充：10px 10px 0px 10px;
保证金：0px;
颜色：＃000000;
}
p {
字体大小：16px;
填充：10px 10px 0px 10px;
保证金：0px;
颜色：＃000000;
}
a：link {
font-weight：bold;
text-decoration：none;
color：#FFFFFF; < br $>
}
a：访问{
font-weight：bold;
text-decoration：none ;
颜色：＃7AD0E1;
}
a：悬停，a：活跃{
文字装饰：下划线;
颜色：＃1365AE;
}
/ * ======== ========================================== ======== =========== * /
/ *随机样式类。 * /
.clCMEvent {position：absolute;的z-index：300;宽度：100％;高度：100％;片段：矩形（0100％，100％，0）;左：0;顶部：0;能见度：隐藏}
.clCMAbs {position：absolute;宽度：10;高度：10;左：0;顶部：0;可见性：隐藏}
.clT，.clTover，.clS，.clSover，.clS2，.clS2over {positi on：absolute;溢出：隐藏;宽度：130;高度：30; cursor：hand}
.clT，.clTover {padding：2px;字体大小：16px的; font-weight：bold}
.clT {color：white; }
.clTover {color：＃7AD0E1;}
.clS，。clSover {padding：2px;字体大小：16px的; font-weight：bold}
.clS2，.clS2over {padding：2px; font-size：16px;}
/ * .clS，.clS2 {color：white;背景色：＃6699CC; layer-background-color：＃6699CC;} * /
.clS，.clS2 {color：white;背景色：＃3B3B65; layer-background-color：＃3B3B65;}
.clSover，.clS2over {color：＃7AD0E1;}
/ * .clSover ，.clS2over，.clTover，.CLB，.clBar {层背景色：＃0066CC; background-color：＃0066CC;} * /
.clSover，.clS2over {layer-background-color：＃1365AE; background-color：＃1365AE;}
.clB {position：absolute; visibility：hidden的; z-index：300}
.clBar {position：absolute;宽度：10;高度：30; visibility：hidden的; }
/ * =================================== =============== =================== * /
任何帮助为了使网站在所有三个网站（IE，Netscape，Firefox）中正常显示，我将不胜感激。
I''ve got a site that appears properly in both IE and Netscape for has all sorts of appearance issues in Mozilla Firefox. I''ve looked around for some points on the web that help explain the issue, but have so far found nothing. I''ve come to the conclussion that the problem has to be a CSS one.
Here''s the site address. It''s currently being hosted on Tripod, until we get some of the bugs worked out and put it on the final hosting site:
http://rsteph49.tripod.com/default.shtml
Here''s the style sheet currently being used:
/* css style sheet */
body {
margin: 10px 10px 0px 10px;
padding: 0px;
}
/* ================================================== =================== */
/* Specific DIVs */
#bannercontent {
position: absolute;
left: 190px;
top: 10px;
height: 226px;
width: 900px;
voice-family: "\"}\"";
voice-family: inherit;
z-index: 1;
}
html>body #bannercontent {
height: 200px;
}
#menucontent {
position: absolute;
left: 190px;
top: 236px;
width: 900px;
height: 30px;
background-image: URL(images/menu04.png);
z-index: 3;
}
#bodycontent {
position: absolute;
left: 190px;
top: 266px;
height: 1000px;
width: 900px;
voice-family: "\"}\"";
voice-family: inherit;
background-image: URL(images/marb009.jpg);
z-index: 1;
}
html>body #bodycontent {
height: 800px;
}
#footer {
position: absolute;
left: 190px;
top: 1266px;
height: 40px;
width: 900px;
voice-family: "\"}\""
voice-family: inherit;
background-image: URL(images/menu04.png);
z-index: 1;
}
html>body #footer {
height: 40px;
}
#groupItem {
height: 80px;
border: 1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height: 80px;
width: 800px;
z-index: 2;
}
html>body #footer {
height: 80px;
}
#datetime {
font-family: arial;
font-size: 14pt;
font-weight: 900;
color: #ffffff;
z-index: 3;
}
/* ================================================== =================== */
/* Font Elements */
#bannercontent h1 {
font-size: 58px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}
#bodycontent h1 {
font-size: 36px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}
#bodycontent p {
font-size: 16px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}
#bodycontent h5 {
font-weight: bold;
font-size: 16px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}
#bodycontent li {
font-size: 18px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}
#menucontent h1 {
font-size: 36px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}
#menucontent p {
font-size: 16px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}
#footer p {
font-size: 16px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}
p {
font-size: 16px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}
a:link {
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #7AD0E1;
}
a:hover, a:active {
text-decoration: underline;
color: #1365AE;
}
/* ================================================== =================== */
/* Random style classes. */
.clCMEvent{position:absolute; z-index:300; width:100%; height:100%; clip:rect(0,100%,100%,0); left:0; top:0; visibility:hidden}
.clCMAbs{position:absolute; width:10; height:10; left:0; top:0; visibility:hidden}
.clT,.clTover,.clS,.clSover,.clS2,.clS2over{positi on:absolute; overflow:hidden; width:130; height:30; cursor:hand}
.clT,.clTover{padding:2px; font-size:16px; font-weight:bold}
.clT{color:white; }
.clTover{color:#7AD0E1;}
.clS,.clSover{padding:2px; font-size:16px; font-weight:bold}
.clS2,.clS2over{padding:2px; font-size:16px;}
/* .clS,.clS2{color:white; background-color:#6699CC; layer-background-color:#6699CC;} */
.clS,.clS2{color:white; background-color:#3B3B65; layer-background-color:#3B3B65;}
.clSover,.clS2over{color:#7AD0E1;}
/* .clSover,.clS2over,.clTover,.clB,.clBar{layer-background-color:#0066CC; background-color:#0066CC;} */
.clSover, .clS2over{layer-background-color:#1365AE; background-color:#1365AE;}
.clB{position:absolute; visibility:hidden; z-index:300}
.clBar{position:absolute; width:10; height:30; visibility:hidden; }
/* ================================================== =================== */
Any help for what I have to do to make the site appear properly in all three (IE, Netscape, Firefox) would be greatly appreciated.
推荐答案
你的doctype不正确和IE浏览器处于怪癖模式。资本化问题：
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Strict // EN"
" http：//www.w3 .org / TR / xhtml1 / DTD / xhtml1-strict.dtd">
Your doctype is incorrect and IE is in quirks mode. Capitalization matters:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
我做了那个改变，但它对菜单栏没有任何影响。我注意到在查看菜单栏的javascript时，我将barClass设置为clBar，在.css中有一个绝对的帖子。这可能是问题的一部分吗？如果是这样，有没有办法让我改变它，只有在Firefox中查看时（因此在IE / Netscape中查看时没有搞乱的风险？
谢谢你的帮助。
I made that change, but it didn''t have any effect on the menubar. I noticed when looking at the javascript for the menubar, I have the barClass set as clBar, which in the .css has a postition of absolute. Could that be part of the problem? And if so, is there a way for me to change this, only when viewing in Firefox (so there''s no risk of messing things up when viewing in IE/Netscape?
Thanks for your help.
你的doctype不正确，IE处于怪癖模式。资本化很重要：
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Strict // EN"
" http：//www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">
Your doctype is incorrect and IE is in quirks mode. Capitalization matters:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
您使用的是无效的Xhtml。在xhtml中，标签必须是小写的，因为xml区分大小写。此外，许多标签以/> ;;以斜杠结尾。在我们遇到javascript问题之前验证并修复这50个错误。你必须先让你的html正确。
You are using invalid Xhtml. In xhtml, tags must be in lower-case because xml is case sensitive. Also, many tags end with />; with the slash. Validate and fix those 50 errors before we get into javascript problems. You have to have your html correct before anything else.
这篇关于网站在Mozilla Firefox中无法正常显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
