`

如何解决浏览器的兼容问题

阅读更多
关于浏览器的兼容性问题,我认为可以从浏览器对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属性

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics