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

  1. /* 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 auto9;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 auto9;
    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拿出来,很难帮你分析是什么原因造成兼容性的问题,把代码贴出来把~~~

  1. nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <span class="pun">乾元文化娱乐有限公司</span>                 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); //设置定时器,显示下一张显示的图片            

登录后复制

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

  1.     

登录后复制

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    html发布到外网中的include问题_html/css_WEB-ITnose

    2025-3-10 5:49:08

    编程技术

    怎么实现这个_html/css_WEB-ITnose

    2025-3-10 5:49:18

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索