堆栈内存溢出
  简体   繁体   English

CSS样式表浏览器兼容性

[英]CSS style sheet browser compatibility

 原文  2011-04-11 10:45:09  9   1    html/ css

问题描述

I designed a site using css and div tag. 我使用css和div标签设计了一个站点。 It's working fine in IE 8 but it's not working properly in Firefox. 在IE 8中工作正常，但在Firefox中工作不正常。 Some resolution problem is coming in Firefox for some pages. 某些页面的Firefox中出现了一些解析问题。

Is this problem due to css or div? 这个问题是由于CSS还是div？

This is my css style sheet... 这是我的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;
 }

And Html code where it is not working fine 和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 个解决方案

解决方案1
 -1  2017-12-27 02:42:58

I tried with my mozilla browser its looks perfect if u getting the problem just copy that particular css line and as example background : #fff; 我尝试使用我的mozilla浏览器，如果您遇到问题，只需复制该特定的CSS行并作为示例background : #fff; ，它看起来就很完美background : #fff; and add this line -moz-background : #fff; 并添加以下行-moz-background : #fff; now the css look like this 现在的CSS看起来像这样 

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

both will be there...... moz will be make mozilla compatible another one for all browser support.... i hope this will be help you 两者都将存在……moz将使mozilla兼容所有浏览器支持。……希望这对您有所帮助

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CSS - 跨浏览器兼容性=不同的样式表？ - CSS - cross browser compatibility = different style sheets? CSS浏览器兼容性问题 - CSS Browser Compatibility issues CSS样式表实现 - CSS style sheet implementation CSS样式表中的jQuery - jQuery in CSS style sheet CSS样式表不起作用？ - CSS Style Sheet is Not Working? CSS图像过滤器-浏览器兼容性 - css image filters - browser compatibility HTML和CSS浏览器兼容性问题 - HTML and CSS browser compatibility issue CSS3的浏览器兼容性问题 - Browser compatibility issues with CSS3 CSS和HTML的浏览器兼容性问题 - Browser compatibility issue with css and html CSS浏览器兼容性问题- <hr /> - CSS Browser Compatibility Issue - <hr />
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM