Heim > Web-Frontend > HTML-Tutorial > 怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-21 09:39:58
Original
994 Leute haben es durchsucht

/* 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;}
Nach dem Login kopieren


回复讨论(解决方案)

你只把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>           
Nach dem Login kopieren

你只把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>
Nach dem Login kopieren

你只把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>
Nach dem Login kopieren
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage