首頁 > web前端 > html教學 > 怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose

怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose

WBOY
發布: 2016-06-21 09:39:58
原創
995 人瀏覽過

/* 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;}
登入後複製


回复讨论(解决方案)

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

解决兼容性问题,要了解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。

多去跨浏览器专区看看,多学习学习


/* 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;
}

你只把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<img Url.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 alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" ></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="max-width:90%">                    <img src="images/point07.gif" alt="" />                    <a href="#" onclick="window.external.addFavorite('http://www.lyqywh.com','乾元文化娱乐有限公司')"                          style="max-width:90%">加入收藏</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="max-width:90%"  style="max-width:90%" 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="ProContext.aspx" class="a">项目背景</a> | <a href="ProAddress.aspx" class="a">                    项目选址</a> | <a href="ProSyn.aspx" class="a">项目简介</a> | <a href="ProsCheme.aspx" class="a">                        工程方案</a> | <a href="BenefitAnaly.aspx" class="a">效益分析</a> | <a href="FinalnPro.aspx"                            class="a">环境影响</a> | <a href="Airscape.aspx" class="a">鸟瞰乾元</a>            </div>            <div id="adDiv">                <marquee direction="left" behavior="alternate" scrollamount="3" >真诚欢迎各界朋友前来投资及工程建设招议标!有意向者请联系:18637956629(张经理)</marquee>            </div>            <div id="centerDiv">                <div id="centerLeftDiv">                    <div id="leftTopDiv">                        <img src="images/small/div1.jpg" id="div1" border="0" alt="" />                        <img src="images/small/div2.jpg"   style="max-width:90%" id="div2" border="0" alt="" />                        <img src="images/small/div3.jpg"   style="max-width:90%" id="div3" border="0" alt="" />                        <img src="images/small/div4.jpg"   style="max-width:90%" id="div4" border="0" alt="" />                    </div>                    <div id="leftBottomDiv">                        <img src="images/small/2010-08-09_230419.jpg" alt="向上" onclick="rollPic('up');" width="220"                               style="max-width:90%" /><br />                        <br />                        <div id="siderMarquee">                            <img id="roll1" src="images/small/chengmen.jpg" width="220"    style="max-width:90%" alt="" /><br />                            <br />                            <img id="roll2" src="images/small/dadian.jpg" width="220"    style="max-width:90%" alt="" /><br />                            <br />                            <img id="roll3" src="images/small/dadian2.jpg" width="220"    style="max-width:90%" alt="" /><br />                            <br />                            <img src="images/small/2010-08-09_230000.jpg" alt="向下" width="220" onclick="rollPic('notUp');"    style="max-width:90%" />                        </div>                    </div>                </div>                <div id="siderbarDiv">                </div>                <div id="centerRightDiv">                    <br />                    <div id="siderMap">                        您目前位置∶首页</div>                    <div id="rightTopDiv">                        <img src="images/index_select.jpg" alt="" />                        <div id="crt1" onclick="showBigPic(this,'showBigDiv','images/big/jd.jpg')"   style="max-width:90%">                            <img src="images/small/jd.jpg" alt="" /></div>                        <div id="crt2" onclick="showBigPic(this,'showBigDiv','images/big/ly.jpg')"   style="max-width:90%">                            <img src="images/small/ly.jpg" alt="高档公寓" /></div>                        <div id="crt3" onclick="showBigPic(this,'showBigDiv','images/big/ss.jpg')"   style="max-width:90%">                            <img src="images/small/ss.jpg" alt="" /></div>                        <div id="crt4" onclick="showBigPic(this,'showBigDiv','images/big/dj.jpg')"   style="max-width:90%">                            <img src="images/small/dj.jpg" alt="豪华别墅" /></div>                        <div id="crt5" onclick="showBigPic(this,'showBigDiv','images/big/yl.jpg')"   style="max-width:90%">                            <img src="images/small/yl.jpg" alt="" /></div>                        <div id="crt6" onclick="showBigPic(this,'showBigDiv','images/big/xm.jpg')"   style="max-width:90%">                            <img src="images/small/xm.jpg" alt=""/></div>                    </div>                    <div id="rightBottomDiv">                        <div id="conditionDiv">                            <img src="images/index_sub_title_01.jpg" alt="" />                            <div class="conBottom">                                <div   style="max-width:90%">                                    <img src="images/index_sub_icon_01.jpg" alt="" /></div>
登入後複製

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

<div>                                       洛阳龙门石窟是我国三大石窟艺术宝库之一,重要的世届历史文化遗产。位于龙门石窟南1.5公里的草店村,历史上曾是人杰地灵,人文汇璀之地。尤其是从北魏、隋、唐到北宋年间,由于洛阳是行政文化中心,再加上龙门石窟的大规模开凿,与龙门石窟近在咫尺的草店村一带,成文人们关注的热点,最引人注目的是规模宏大的乾元寺,占地上百亩,香客盈门。                                </div>                                                        <div>                                <a>详细>></a>
</div>                                                <div>                            <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" >                            <div>                                <div>                                       乾元*选择的位置既有山坡,又有河滩,什么项目适合建在山坡,什么项目适合建在河滩,需要整体布局,合理规划。由于*项目大,项目多,不可能同时动工,大致分三期进行。                                </div>                                <div>                                    <strong>一期工程:</strong>观赏胡,别墅群,多功能宾馆……<br>                                    <strong>二期工程:</strong>乾元寺,四季游泳场,饮食一条街……<br>                                    <strong>三期工程:</strong>儿童乐园,伊河修整,绿化、路面……                                </div>                            </div>                            <div>                                <a>详细>></a>
</div>                        </div>                        <div>                            <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" >                            <div>                                <a>                                    <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" ></a>                            </div>                            <div>                                <a>详细>></a>
</div>                        </div>                        <div>                            <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" >                            <div>                                <a>                                    <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" ></a>                            </div>                            <div>                                <a>详细>></a>
</div>                        </div>                                                            <div>            </div>            <div>                <div>                    <table>                        <tr>                            <td>                                <a>                                    <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" ></a>                                 <a>                                    <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" ></a>                                 <a>                                    <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" ></a>                                 <a>                                    <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" ></a>                                 <a>                                    <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" ></a>                                 <a>                                    <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" ></a>                                 <a>                                    <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" ></a>                                 <a>                                    <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" ></a>                                 <a>                                    <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" ></a>                                 <a>                                    <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" ></a>                                 <a>                                    <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" ></a>                                 <a>                                    <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" ></a>                                 <a>                                    <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" ></a>                                 <a>                                    <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" ></a>                                 <a>                                    <img  alt="怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose" ></a>             &</td>
</tr>
</table>
</div>
</div>
登入後複製
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板