注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

上海seo顾问网站优化搜索引擎优化

上海seo咨询顾问,网站优化搜索引擎优化服务,google优化,网站优化公司

 
 
 

日志

 
 

DIV+CSS设计时IE6、IE7、IE8、Firefox 兼容性问题  

2010-12-29 17:57:09|  分类: css兼容 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

设计的时候会因为浏览器兼容问题而头大,ie和firefox还好区分,但是ie6和ie7都是一家公司的浏览器这要怎么区分呢!针对这个问题我在网上查了一下ie6和ie7的写法,总结了一下 IE6、IE7、IE8、Firefox 兼容性技巧

我以前都是针对ie6来写css,现在我觉得以firefox来写更方便,毕竟firefox漏洞少,IE7也很接近firefox的效果。

1.针对firefox的一般写法:

#box {
background:#000B15 url(../images/index_top.jpg) no-repeat left top;
width:980px;
margin:0 auto;
text-align:left;
}

2.然后根据ie7的不同显示改成:[我一般会写在正常的下面]

#box {
background:#000B15 url(../images/index_top.jpg) no-repeat left top;
width:980px;
margin:0 auto;
text-align:left;
*+width:970px; 
}
* 是ie6和ie7都能识别,firefox不能识别,这样就能起到很好的区分,但是只有ie7识别+,所以为了区分ie6和ie7所以写成*+

3.ie6中的写法:

#box {
background:#000B15 url(../images/index_top.jpg) no-repeat left top;
width:980px;
margin:0 auto;
text-align:left;
*+width:970px;
_width:900px; 
}
_ 这是ie6能识别的
其实应该还要很多方法,不过我是我经常用的方式。

4.ie8中的写法:

<meta http-equiv="x-ua-compatible" content="ie=7" />

把这段代码放到<head>里面,在ie8里面的页面解析起来就跟ie7一模一样的了。

* 这个是后来从网上查到的,不过说是现在只能用于ie8的测试版,等正式版出来后再看是否还有用吧!

另外针对ie8的写法是:

#box {
background:#000B15 url(../images/index_top.jpg) no-repeat left top;
width:980px;
margin:0 auto;
text-align:left;
width:1000px \9; 
*+width:970px;
_width:900px; 
}

* ie8必须在ie6和ie7写法的前面才有用,所以需要注意顺序

学习心得:
1. IE FF 居中不一样:
   text-align:center; //FF
   margin-left:auto;   //IE
   margin-right:auto;   //IE

2. IE指定的最小高度为18px;

3. IE会自动调整最小高度;而FF不会,指定多少就是多少.

4. FF如果使用浮动, 则是正常的.

5. IE和FF在列表上的区别:
   使用时用如下参数来使IE和FF的设置同步
   ul{
        margin:0px;
        padding:0px;
        list-style:none;
}
      
6. h标签 区别:
   margin:0px;
   padding:0px;
   line-height:123px;       //指定一个值
  
7. border IE=内容+框 FF边框另算
   width:298px !important;   //FF
   width:300px ;       //IE

  评论这张
 
阅读(356)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017