[英]CSS style sheet browser compatibility
我使用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;
,它看起來就很完美background : #fff;
並添加以下行-moz-background : #fff;
現在的CSS看起來像這樣
-moz-background : #fff;
background : #fff;
兩者都將存在……moz將使mozilla兼容所有瀏覽器支持。……希望這對您有所幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.