关于浏览器的兼容性问题,我认为可以从浏览器对CSS标记属性的默认解释不统一来说:
比如:margin-left:这个属性在使用float:的情况下会双倍显示距离,所以一旦这样使用了那么在IE6、7、8、9中显示的距离就不一样,所以就不兼容了。建议使用padding-left:来代替margin-left: 【住:margin的其他属性均正常,可以正常使用,padding的所有属性均正常,可以正常使用,不存在浏览器解释不一样的问题】
另外 margin padding 属性在不同的浏览器的解释也各不相同,解决方法为统一的把他们归0:【margin:0px;padding:0px;】;
同样标记也是如此:不同的标记在不同的浏览器解释也有所不同:主要同样是表现在margin padding上,方法同上;
CSS基本样式如下:
@charset "GB2312" /* 默认编码方式 */
/* CSS Document */
div,span,img{
margin:0px;
padding:0px;
}
p,ul,ol,li{
margin:0px;
padding:0px;
}
body{
margin:0px;
padding:0px;
font-size:12px;
color:#3e3e3e;
}
li{
list-style-type:none;
}
a{
text-decoration:none;
color:#000000;
outline: none; /* 解决点击链接产生虚线边框 */
}
a:hover{
text-decoration:none;
}
a img{
border:0;
}
CSS基本写法如下:
.main{
width:1000px;
height:auto;
margin:0 auto;
}
.main .top{
width:1000px;
height:126px;
float:left;
background:url(../images/top_r1_c1.jpg) no-repeat;
}
.main .top .top_p1{
width:97%;
height:40px;
line-height:40px;
float:left;
padding-right:3%;
text-align:right;
}
.main .top .top_p1 span{
width:100px;
font-size:14px;
font-weight:bold;
color:#999999;
}
.main .top .top_p1 span.t_sp{
font-size:18px;
color:#666666;
}
.main .top .dh{
width:1000px;
height:auto;
color:#666666;
float:left;
padding-top:20px;
}
.main .top .dh ul{
width:958px;
padding-left:2px;
height:26px;
margin:0 auto;
background-color:#F2F2F2;
}
.main .top .dh ul li{
width:105px;
height:22px;
line-height:22px;
margin-left:1px;
float:left;
background-color:#666666;
}
.main .top .dh ul li a{
float:left;
width:105px;
font-size:14px;
color:#FFFFFF;
text-align:center;
display:block;
font-weight:bold; /*#99CC00*/
}
.main .top .dh ul li a:hover{
background-color:#99CC00;
}
.main .top .dh ul li a.dh_a{
background-color:#99CC00;
}
建议所有标记全部使用float:left或者right属性
分享到:
相关推荐
IE6浏览器兼容问题总结及CSS排版注意地方 列举IE6中10个不得不注意的问题 重构你的代码
javascript解决浏览器兼容性问题
对于网页设计师来说,浏览器兼容是个令人头疼的难题,本文总结了一些常用的解决此类问题的CSS技术
我们再网站的制作中,常常会为了浏览器的兼容问题,而绞尽脑汁的想解决方案,现在我在整理一个相应问题的解决方案的文档,很不错的资源,绝对强大的资源
常见浏览器兼容问题及解决方法。
javascript解决innerText浏览器兼容问题思路代码.docx
使用div+css建站的朋友一定都知道CSS兼容的问题。今天教大家五招方法完全可以解决浏览器兼容问题。
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的...
浏览器兼容问题解决办法
常见浏览器兼容性问题与解决方案 常见浏览器兼容性问题与解决方案 常见浏览器兼容性问题与解决方案
总结归纳CSS最新技术及其浏览器兼容问题,完全精华材料。
文件里面包含两个文件,一个是browser.min,一个是polyfill.min,只需要简单的把这个两个文件引入,即可解决部分浏览器不兼容es6的语法的问题, 一、使浏览器兼容ES6基本语法:...购买一个内容解决浏览器兼容问题,
CSS浏览器兼容问题,解决各个浏览器中css不兼容的问题。
主要为大家详细介绍了ajax文件上传的相关资料,成功解决了浏览器兼容问题,感兴趣的小伙伴们可以参考一下
当前360浏览器占据的浏览器市场20%以上的份额,我们做网站的肯定要考虑一下兼容性,有时候chrome与ie正常,但到了360浏览器就不行了,可能360双核的ie核心比较偏低版本的原因
浏览器兼容问题解决方案,布局定义。减少错误。
能全方位的解决浏览器兼容问题,解决ie与ff浏览器的一些棘手问题
CSS种针对浏览器兼容问题的解决方法,平时收集到的一些,希望对大家有所帮助
div+css浏览器兼容问题解决方法,不错,不错,不错……
最全的CSS浏览器兼容问题,解决不同版本浏览器之间的CSS兼容问题