我使用CSS和div标签设计了一个站点。在IE 8中工作正常，但在Firefox中工作不正常。某些页面的Firefox中出现了一些解析问题。
这个问题是由于CSS还是div？
这是我的CSS样式表...
@charset "utf-8";
/* CSS Document */
a.bottom:link,a.bottom:visited,a.bottom:active
{
/*display:compact;*/
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:normal;
color:#FFFFFF;
background-color:#BF007F;
text-align:center;
padding:10px;
text-decoration:none;
}
a.bottomClick:link,a.bottomClick:visited,a.bottomClick:active
{/*display:compact;*/
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:normal;
color:#BF007F;
background-color:#F0F0F0;
text-align:center;
padding:10px;
text-decoration:none;
}
.MainHeading {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#000000;
font-weight:bold;
}
.HeadingOfContentBox {
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#000000;
font-weight:bold;
}
.ContentText {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#000000;
font-weight:normal;
}
#ContentTable
{
font-family: Arial, Helvetica, sans-serif;
background-color:#F0F0F0;
background-repeat:repeat-y;
width:960px;
}
ul
{
list-style-type:none;
padding:4px;
margin:0px;
font-family:Arial, Helvetica, sans-serif;
}
li
{
background-image:url();
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:18px;
font-family:Arial, Helvetica, sans-serif;
line-height:1.5;
margin-left:20px;
margin-right:20px;
}
ul.unorder
{
list-style-type:none;
padding:0px;
margin:0px;
font-family:Arial, Helvetica, sans-serif;
}
li.unorder
{
background-image:none;
background-position:0px 5px;
padding-left:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
font-weight:normal;
}
A.topLink:Link {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#bf007f;
text-decoration:underline;
font-weight:bold;
}
A.topLink:hover {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#bf007f;
text-decoration:underline;
font-weight:bold;
}
A.topLink:Visited {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#bf007f;
text-decoration:underline;
font-weight:bold;
}
#framecontentLeft{
top: 0;
left: 0;
width:320px; /*Width of left frame div*/
float:left;
background-image:url(../images/varioCatering02_02.png);
color: white;
}
#framecontentRight{
left: auto;
right: 0;
float:right;
width: 320px; /*Width of right frame div*/
background-image:url();
color: white;
}
#maincontent{
width:960px;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
#divleft
{
float:left;
}
#divright
{
float:right;
}
p
{
text-align:justify;
padding:10px;
line-height:1.5;
margin-left:10px;
margin-right:10px;
margin-top:0px;
}
和HTML代码无法正常工作的地方
<!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=utf-8" />
<title>dimari - efficient customer solutions for your industry</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
background-image:url();
background-repeat: repeat-x;
}
-->
</style>
<link href="css/CssStyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="framecontentLeft"> </div>
<div align="center">
<div id="maincontent">
<div style="height:10px;"></div>
<div id="divleft">LogoImage with hyperlink</div>
<div id="divright"> <a class="topLink" href="Kontakt.html">Kontakt</a> <a class="topLink" href="Impressum.html">Impressum</a> </div>
<div style="height:80px"> </div>
<div align="center" style="margin-bottom:10px;">BannerImage</div>
<div id="maincontent" style="margin-bottom:8px;">
<div style="height:10px;"></div>
<div id="divright" > <b class="MainHeading">Hyperlink</a></b> <b class="MainHeading">HyperLink</b> </div>
</div>
<br/>
<div id="maincontent" >
<div id="ContentTable">
<div id="divleft">
<div align="left">
<h3 class="HeadingOfContentBox" style="text-align:left;padding:10px; margin-left:10px;margin-right:10px">Schulen/Eltern</h3>
</div>
<p class="ContentText" style="width:960px;"> </p>
</div>
</div>
</div>
<div id="maincontent">
<div id="ContentTable" style="height:450px;">
<div style="float:left; margin-left:15px;display: inline;" ><span style="text-align:left" >
<h4 class="ContentText" style="margin-left:10px;margin-right:10px;padding:10px;"> Argumente:</h4>
<ul>
<li> <span class="ContentText">Bargeldloses Bezahlen</span></li>
<li class="ContentText">Sicherer Online Login </li>
<li class="ContentText">Abrechnung pro Gramm > Kind dosiert sich je nach Hunger Essen > wenn mehr Hunger, Nachtisch holen und bequem wieder per Karte bezahlen </li>
<li class="ContentText"> Schnellere Essensausgabe > Kind/Lehrer mehr Zeit zum Essen an sich </li>
<li class="ContentText">Essen ohne Vorbestellung </li>
<li class="ContentText">Sicherer online Login </li>
<li class="ContentText">Übersichtlichkeit: Nutzungsdaten, Bankdaten, Guthaben, Gekauftes Essen </li>
<li class="ContentText"> Anmeldung auch ohne Emailadresse, einfach telefonisch </li>
<li class="ContentText">Ampelstatus im online Account: Angabe wie viel Restguthaben vorhanden </li>
<li class="ContentText">Automat. Benachrichtigung über Restguthaben </li>
</ul>
</span> </div>
</div>
</div>
<div id="maincontent">
<div id="ContentTable">
<p>
<!-- Add your text here-->
<!-- Add your text here-->
<!-- Add your text here-->
</p>
<p></p>
</div>
</div>
</div>
</div>
<div id="framecontentRight"> </div>
</body>
</html>
最佳答案
我尝试使用我的mozilla浏览器，如果您遇到问题，只需复制该特定的CSS行并作为示例background : #fff;并添加此行-moz-background : #fff;，它看起来就完美了，现在CSS看起来像这样
-moz-background : #fff;
background : #fff;
两者都将存在……moz将使mozilla兼容所有浏览器支持的另一个……。希望这对您有所帮助
关于html - CSS样式表浏览器兼容性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5620165/