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

天边云E家 shaoruisky

IT博文共享,知识的海洋

 
 
 

日志

 
 

DIV CSS 网站布局兼容所有浏览器  

2013-11-19 15:05:17|  分类: 网页设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
由于不同浏览器对于CSS解析结果不同,一段CSS代码在不同的浏览器下显示页面效果不一致,因此就需要写不同代码兼容各种浏览器,在不同的浏览器中都能得到预期的页面效果。这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack。
 
CSS hack 的原理是不同的浏览器对CSS的支持及解析结果不一样以及CSS中的优先级的关系。
 
每一行都有每一行的行规和技术说明,作为网站设计的人员最头通莫过于用DIV+CSS这种流行的W3C标准的布局,因为它在不同的浏览器下,其显示也是千差万别的,这都是由于各个浏览器厂商的出品采用的技术标准不同所引起的,这也是让人比较头痛的所在,在IE下好好的,可能到了firefox、360 等下面全乱了,错位了,如果您 是一位潜在客户去浏览到这样的企业网站,您有何感想?
 
因此作为东莞本土化网站制作公司的我们,如何保证在各个版本、厂商的浏览器下保证不会出错位现象出现就值得我们深思,下面我们洪福科技就日常工作的一点经验和大家分享,欢迎大家拍砖
 
一、FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
 
二、居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vetical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
 
三、 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
 
四、FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
 
五、 ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
 
六、 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
 
七、关于手形光标. cursor: pointer. 而hand 只适用于 IE.
 
八、万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
 
九、简单介绍在IE6、IE7和Firefox(以下简称FF)下的CSS hack的写法。
 
区分IE(包括ie6和ie7)和FF
 
div.bg_color{
    background:orange;*background:blue;
}
 
在IE下是显示blue,在FF下是orange。IE可以识别CSS中的*,由于CSS得优先级关系,在IE中显示的是最后设置的blue,而FF由于不能识别*,对于带*的属性不做解析。
 
区分IE6和IE7
 
div.bg_color{
    background:orange !important;background:blue;
}
 
在IE6显示为blue,IE7下为orange,因为IE6不支持!important而IE7支持。
 
区别FF,IE7,IE6:
 
1. background:orange; *background:green !important; *background:blue;
 
2. background:orange; *background:green; _background:blue;
 
不管用哪种方法书写,顺序都是firefox的写在前面,IE7其次,IE6的写在最后面。希望您看了以上文章对你写兼容性良好的的CSS有很大帮助。
 
我们还会陆续的分享有关CSS 不兼容的文章,欢迎大家关注
 
附CSS hack表一张,希对您有帮助

CSS hack对照表

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

历史上的今天

评论

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

页脚

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