怎样解决浏览器兼容有关问题？

2012-12-17

怎样解决浏览器兼容问题？求救！/* reset */html {border:0}body, div, dl, dt, dd, ul, ol, li, h1, h2, h

怎样解决浏览器兼容问题？求救！



/* reset */
html {border:0;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{padding:0;margin:0;}
body {font: 75%/150% Verdana, Lucida, Arial, Helvetica,宋体,sans-serif; color: #111; text-align:center; }
body {width:970px; margin:15px auto;}
fieldset, img{border:0;}
table{border-collapse:collapse;border-spacing:0;}
:focus{outline :0;}
ol, ul{list-style:none outside;}
address, caption, cite, code, dfn, em, strong, th, var{font-weight:normal;font-style:normal;}
caption, th{text-align:left;}
h1, h2, h3, h4, h5, h6{font-size:100%;}
q:before, q:after{content:'';}
abbr, acronym,fieldset, img{border:0;}
a{text-decoration:none; color:#333;}
a:hover{text-decoration:none;}
input, textarea{padding:2px;font-size:12px;}
select {font:12px Arial, Helvetica, sans-serif; }
/* public classes */
.clearfix:after{content:".";height:0;visibility:hidden;display:block;clear:both;}
.clearfix{display:inline-block;}
.clearfix{display:block;}


*
{
border: 0px;
}
body
{
text-align:center;
}

img
{
border: 0px;
cursor: pointer;
}

a
{
text-decoration: none;
color: #0033FF;
}
.a
{
color: #ffffff;
}

a:hover
{
color: #CCCC00;
}

#adDiv
{
width: 980px;
font-size: 22px;
font-weight: bold;
color: #FF0000;
}

#mainDiv
{
width: 980px;
margin: 0 auto\9;
padding-top:0;
text-align: center;
position: relative;
background-color: #FFFFFF;
}


#logoDiv
{
width: 980px;
height: 89px !important;
height: 87px;
}

#flashDiv
{
width: 980px;
}

#navigationDiv
{
width: 980px;
font-size: 16px;
font-family: "楷体_GB2312";
text-align: center;
height: 32px !important;
height: 30px;
background-color: #999999;
padding-top: 17px !important;
padding-top: 15px;
margin-top: 3px !important;
margin-top: 1px;
}

#siderMap
{
width: 750px;
font-size: 12px;
text-align: left;
padding-left: 10px;
}

#centerDiv
{
height: 800px;
width: 980px;
}

#marqueeDiv
{
float:left;
height: 200px;
width: 980px;
}

#bottomDiv
{
height: 10px;
width: 980px;
bottom: 0;
padding-top: 15px;
font-size: 13px;
text-align: center;
color: #666666;
}

#centerLeftDiv
{
margin-top: 10px;
width: 220px;
float: left;
display: inline;
}

#centerRightDiv
{
width: 750px;
float: left;
display: inline;
}


#leftTopDiv
{
float: left;
height: 150px;
width: 220px;
display: inline;
}

#leftBottomDiv
{
float: left;
width: 220px;
margin-top: 5px;
display: inline; 
 
}

#rightTopDiv
{
position: relative;
width: 750px;
float: left;
display: inline;
}

#siderbarDiv
{
float: left;
width: 10px;
display: inline;
}

#rightBottomDiv
{
width: 740px;
float: left;
display: inline;
padding-left: 20px;
}


#conditionDiv
{
float: left;
width: 307px;
margin-bottom: 0px;
padding-bottom: 0px;
display: inline;
height:280px;
}

#lawDiv
{
float: left;
width: 307px;
margin-left: 68px;
display: inline;
height:280px;
}

#guideDiv
{
float: left;
width: 307px;
margin-top: 10px;
display: inline;
height:280px;
}

#statDiv
{
float: left;
width: 307px;
margin-top: 10px;
margin-left: 68px;
display: inline;
height:280px;
}


.conBottom
{
margin-top: 10px;
padding-top: 0px;
border: solid 0px #89D8F6;
width: 307px;
height: 180px;
font-size: 13px;
text-align: left;
overflow: visible;
}

.moreDiv
{
text-align: right;
padding-bottom: 5px;
margin-bottom: 5px;
font-size: 13px;
}

#siderMarquee
{
margin-top: 5px;
}

#crt1
{
position: absolute;
width: 174px;
height: 94px;
left: 32px;
top: 28px;
}

#crt2
{
position: absolute;
width: 174px;
height: 94px;
left: 274px;
top: 29px;
}

#crt3
{
position: absolute;
width: 174px;
height: 94px;
left: 508px;
top: 29px;
}

#crt4
{
position: absolute;
width: 174px;
height: 94px;
left: 32px;
top: 141px;
}

#crt5
{
position: absolute;
width: 174px;
height: 92px;
left: 273px;
top: 141px;
}

#crt6
{
position: absolute;
width: 174px;
height: 93px;
left: 508px;
top: 140px;
}


#showBigDiv
{
position: absolute;
z-index: 3;
width: 400px;
height: 216px;
left: 393px;
top: 528px;
}

li
{
text-align: left;
}

.tr
{
background-color: #ccddff;
}
.tr1
{
background-color: #eeeeff;
}

#contentDiv
{
font-size: 13px;
padding-top: 5px;
padding-left: 20px;
color: #666666;
text-align: left;
height:500px;
background-repeat:no-repeat;
}

[最优解释]
<a href="ProContext.aspx" class="a">项目背景</a>
[其他解释]
有个取巧的办法，根据浏览器设置相应的CSS。
[其他解释]

/* reset */
html {border:0;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{padding:0;margin:0;}

body {font: 75%/150% Verdana, Lucida, Arial, Helvetica,宋体,sans-serif; color: #111; text-align:center; }
body {width:970px; margin:15px auto;}
fieldset, img{border:0;}
table{border-collapse:collapse;border-spacing:0;}
:focus{outline :0;}
ol, ul{list-style:none outside;}
address, caption, cite, code, dfn, em, strong, th, var{font-weight:normal;font-style:normal;}
caption, th{text-align:left;}
h1, h2, h3, h4, h5, h6{font-size:100%;}
q:before, q:after{content:'';}
abbr, acronym,fieldset, img{border:0;}
a{text-decoration:none; color:#333;}
a:hover{text-decoration:none;}
input, textarea{padding:2px;font-size:12px;}
select {font:12px Arial, Helvetica, sans-serif; }
/* public classes */
.clearfix:after{content:".";height:0;visibility:hidden;display:block;clear:both;}
.clearfix{display:inline-block;}
.clearfix{display:block;}

*
{
    border: 0px;
}
body
{
    text-align:center;
}

img
{
    border: 0px;
    cursor: pointer;
}

a
{
    text-decoration: none;
    color: #0033FF;
}
.a
{
    color: #ffffff;
}

a:hover
{
    color: #CCCC00;
}

#adDiv
{
    width: 980px;
    font-size: 22px;
    font-weight: bold;
    color: #FF0000;
}

#mainDiv
{
    width: 980px;
    margin: 0 auto\9;
    padding-top:0;
    text-align: center;
    position: relative;
    background-color: #FFFFFF;
}

#logoDiv
{
    width: 980px;
    height: 89px !important;
    height: 87px;
}

#flashDiv
{
    width: 980px;
}

#navigationDiv
{
    width: 980px;
    font-size: 16px;
    font-family: "楷体_GB2312";
    text-align: center;
    height: 32px !important;
    height: 30px;
    background-color: #999999;
    padding-top: 17px !important;
    padding-top: 15px;
    margin-top: 3px !important;
    margin-top: 1px;
}

#siderMap
{
    width: 750px;
    font-size: 12px;
    text-align: left;
    padding-left: 10px;
}

#centerDiv
{
    height: 800px;
    width: 980px;
}

#marqueeDiv
{
    float:left;
    height: 200px;
    width: 980px;
}

#bottomDiv
{
    height: 10px;
    width: 980px;
    bottom: 0;
    padding-top: 15px;

    font-size: 13px;
    text-align: center;
    color: #666666;
}

#centerLeftDiv
{
    margin-top: 10px;
    width: 220px;
    float: left;
    display: inline;
}

#centerRightDiv
{
    width: 750px;
    float: left;
    display: inline;
}

#leftTopDiv
{
    float: left;
    height: 150px;
    width: 220px;
    display: inline;
}

#leftBottomDiv
{
    float: left;
    width: 220px;
    margin-top: 5px;
    display: inline;
}

#rightTopDiv
{
    position: relative;
    width: 750px;
    float: left;
    display: inline;
}

#siderbarDiv
{
    float: left;
    width: 10px;
    display: inline;
}

#rightBottomDiv
{
    width: 740px;
    float: left;
    display: inline;
    padding-left: 20px;
}

#conditionDiv
{
    float: left;
    width: 307px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    display: inline;
    height:280px;
}

#lawDiv
{
    float: left;
    width: 307px;
    margin-left: 68px;
    display: inline;
    height:280px;
}

#guideDiv
{
    float: left;
    width: 307px;
    margin-top: 10px;
    display: inline;
    height:280px;
}

#statDiv
{
    float: left;
    width: 307px;
    margin-top: 10px;
    margin-left: 68px;
    display: inline;
    height:280px;
}

.conBottom
{
    margin-top: 10px;
    padding-top: 0px;
    border: solid 0px #89D8F6;
    width: 307px;
    height: 180px;
    font-size: 13px;
    text-align: left;
    overflow: visible;
}

.moreDiv
{
    text-align: right;
    padding-bottom: 5px;
    margin-bottom: 5px;
    font-size: 13px;
}

#siderMarquee
{
    margin-top: 5px;
}

#crt1
{
    position: absolute;
    width: 174px;
    height: 94px;
    left: 32px;

    top: 28px;
}

#crt2
{
    position: absolute;
    width: 174px;
    height: 94px;
    left: 274px;
    top: 29px;
}

#crt3
{
    position: absolute;
    width: 174px;
    height: 94px;
    left: 508px;
    top: 29px;
}

#crt4
{
    position: absolute;
    width: 174px;
    height: 94px;
    left: 32px;
    top: 141px;
}

#crt5
{
    position: absolute;
    width: 174px;
    height: 92px;
    left: 273px;
    top: 141px;
}

#crt6
{
    position: absolute;
    width: 174px;
    height: 93px;
    left: 508px;
    top: 140px;
}

#showBigDiv
{
    position: absolute;
    z-index: 3;
    width: 400px;
    height: 216px;
    left: 393px;
    top: 528px;
}

li
{
    text-align: left;
}

.tr
{
    background-color: #ccddff;
}
.tr1
{
    background-color: #eeeeff;
}

#contentDiv
{
    font-size: 13px;
    padding-top: 5px;
    padding-left: 20px;
    color: #666666;
    text-align: left;
    height:500px;
    background-repeat:no-repeat;
}

[其他解释]
多去跨浏览器专区看看，多学习学习
[其他解释]
<a href="ProSyn.aspx" class="a">项目简介</a>
[其他解释]
<a href="ProsCheme.aspx" class="a">
                        工程方案</a>
[其他解释]
解决兼容性问题，要了解CSS在不同浏览器中的工作方式，现在的浏览器只要符合W3c编写，一般都是兼容的。
[其他解释]
专题页面浏览器兼容问题汇总

一、表格Table的三个参数填充、间距和边框必须设置数值。

二、在专题里面插入调查，必须重新设定table的参数。

三、回车符号前面不能有空格。

四、在专题制作里面禁止用＜p＞＜／p＞标签。

五、随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

解决方案：css里 *{margin:0;padding:0;}

六、float布局最常见的浏览器兼容问题。

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性。

七、设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度。

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

八、几个img标签放在一起的时候，有些浏览器会有默认的间距。

解决方案：简单方法是通过表格table进行分割，第二方案：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距，所以去掉这个间距使用float标签可解决。

------其他解决方案--------------------

你只把CSS拿出来，很难帮你分析是什么原因造成兼容性的问题，把代码贴出来把~~~
[其他解释]

引用:

你只把CSS拿出来，很难帮你分析是什么原因造成兼容性的问题，把代码贴出来把~~~


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Index" %>

<!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 runat="server">
    <title>乾元文化娱乐有限公司</title>
    <link href="css/qyylCss.css" rel="stylesheet" type="text/css" />
    <link href="css/ffQyylCss.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/qyyljs.js" language="javascript"></script>
    <script language="javascript" type="text/javascript">
            var imgUrl=new Array();
            var adNum=1;
           
var theTimer;

        imgUrl[1]="images/small/2.jpg"; 
            imgUrl[2]="images/small/3.jpg"; 
          imgUrl[3]="images/small/1.jpg"; 
imgUrl[4]="images/small/lylm.jpg"; 
imgUrl[5]="images/small/lylm2.jpg"; 
          function setTransition(){
             if (document.all){
             document.images.imgUrlrotator.filters.revealTrans.Transition=Math.floor(Math.random()*20);
             document.images.imgUrlrotator.filters.revealTrans.apply();
             }
          }

         function playTransition(){
            if (document.all)
            document.images.imgUrlrotator.filters.revealTrans.play()
         }
         function nextAd(){
             if(adNum<imgUrl.length-1)adNum++ ;
             else adNum=1;
             setTransition();
             document.images.imgUrlrotator.src=imgUrl[adNum];
             playTransition();

             theTimer=setTimeout("nextAd()", 3000);
         }
         
         
        //滚动 
 
    var speed=10;  //设置图片滚动速度
        //获取对象
        function getObj(itempar)
        {
        return document.getElementById(itempar);
        }
    
    function Marquee(){
    if(getObj("demo2").offsetWidth-getObj("demo").scrollLeft<=0){   //当滚动至demo1与demo2交界时
    getObj("demo").scrollLeft=0;//-=demo1.offsetWidth;     //dome跳到最左端
    }else{
    getObj("demo").scrollLeft++;
    }
    }
    var MyMar;
    
    function Load(){
var imgPre=new Array();
            for (i=1;i<5;i++){
                imgPre=new Image();
                imgPre.src=imgUrl;
            }
        MyMar=setInterval("Marquee()",speed);  //设置定时器
        getObj("demo").onmouseover=function(){
        clearInterval(MyMar);
    }  //鼠标移上时清除定时器达到滚动停止的目的
        getObj("demo").onmouseout=function() {
        MyMar=setInterval("Marquee()",speed);
    }//鼠标移开时重设定时器，继续滚动

    }
    
var NowFrame = 1;//图片最先显示第一张
var MaxFrame = 4;//图片一共4张
function show() 
{

for(var i=1; i<(MaxFrame+1); i++){
if(i==NowFrame){
getObj("div"+NowFrame).style.display ="block"; //当前图片显示
}else{
getObj("div"+i).style.display ="none"; //其他的图片隐藏
}
}
if(NowFrame == MaxFrame){ //定义下一张显示的图片
NowFrame = 1;
}else{
NowFrame++;
}

}
setInterval("show()", 2000); //设置定时器，显示下一张显示的图片



    </script>

</head>

[其他解释]

引用:

你只把CSS拿出来，很难帮你分析是什么原因造成兼容性的问题，把代码贴出来把~~~


<body onload="Load()">
    <form id="form1" runat="server">
        <div id="mainDiv">
            <div id="logoDiv">
                <img src="images/global_title.jpg" width="980px" alt="怎样解决浏览器兼容有关问题？" />
                <div style="position: absolute; top: 2px; right: 120px;">
                    <img src="images/point07.gif" alt="怎样解决浏览器兼容有关问题？" /> 
 
                    <a href="#" onclick="window.external.addFavorite('http://www.lyqywh.com','乾元文化娱乐有限公司')"
                        style="color: #FFFFFF; font-size: 12px;">加入收藏</a>
                </div>
                <div style="position: absolute; top: 7px; right: 25px;">
                    <a href="#" style="color: #FFFFFF; font-size: 12px;">
                        联系我们</a></div>
            </div>
            <div id="flashDiv">
                <div align="center">
                    <img style="filter: revealTrans(duration=2,transition=20)" height="152" src="javascript:nextAd()"
                        width="980" border="0" name="imgUrlrotator" alt="怎样解决浏览器兼容有关问题？" />
                </div>
            </div>
            <div id="navigationDiv">
                <a href="Index.aspx" class="a">首页</a> 
[其他解释]
 <a href="CompanySys.aspx" class="a">公司简介</a>
                
[其他解释]
 <a href="ProAddress.aspx" class="a">
                    项目选址</a> 
[其他解释]
 <a href="BenefitAnaly.aspx" class="a">效益分析</a> 
[其他解释]
 <a href="FinalnPro.aspx"
                            class="a">环境影响</a>

热点排行