怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose
/* 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拿出来,很难帮你分析是什么原因造成兼容性的问题,把代码贴出来把~~~
乾元文化娱乐有限公司
你只把CSS拿出来,很难帮你分析是什么原因造成兼容性的问题,把代码贴出来把~~~
推荐阅读
-
怎样解决浏览器兼容问题?求救!_html/css_WEB-ITnose
-
我的网站源代码乱码,却网页显示正常,搜狗浏览器可以打开,火狐ie却不能,求救_html/css_WEB-ITnose
-
请问怎样在本页,控制浏览器.要求:不显示菜单栏、不显示地址栏、不显示连接_html/css_WEB-ITnose
-
css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题_html/css_WEB-ITnose
-
IE6浏览器下div无法遮盖select下拉框解决方法_html/css_WEB-ITnose
-
关于微信缓存、浏览器缓存等各种顽固缓存的解决方法_html/css_WEB-ITnose
-
div+css布局时的浏览器兼容问题_html/css_WEB-ITnose
-
请问怎样在本页,控制浏览器.要求:不显示菜单栏、不显示地址栏、不显示连接_html/css_WEB-ITnose
-
浏览器CSS兼容问题汇总及解决_html/css_WEB-ITnose
-
浏览器兼容问题:高度显示错误_html/css_WEB-ITnose