CSS样式表浏览器兼容性

时间:2011-04-11 10:45:10

标签: html css

我使用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>&nbsp;&nbsp;&nbsp; <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>

1 个答案:

答案 0 :(得分:-1)

我尝试使用我的mozilla浏览器看起来很完美如果你遇到问题只是复制那个特定的css行并作为示例background : #fff;并添加此行-moz-background : #fff;现在css看起来像这样

-moz-background : #fff;
background : #fff;

两者都将在那里...... moz将使mozilla与所有浏览器支持兼容另一个....我希望这将有助于你