浏览器兼容

先来说说什么是浏览器兼容?

对于很多初学者来说先要知道目前主流的浏览器有IE6、IE8、Mozilla、 FireFox、Opera、Safari、Chrome、Netscape等。这些主流的浏览器主要由四个内核程序来服务:

Trident内(IE,MaxThon,TT,The World,360,搜狗浏览器等)

Gecko内核(Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等)

Presto内核(Opera7及以上 )

Webkit内核(Safari,Chrome)

由于浏览器的内核程序不同,所以不同内核程序在对CSS的解析的时候也会有所差别,这种差别会导致生成的页面效果不一样,得不到我们所需要的页面效果。即兼容问题。

如何能做到浏览器兼容?

1、合理化使用标签与CSS

2、使用HACK代码

先说合理化使用标签与CSS。

到底怎么样才是合理的呢?简单讲从这几点着手:

1布局时,非不得已,尽量用“块”标签作为外围来包含“内联”标签。

2弄清楚你所用的标签默认拥有哪些属性,方便重置,并且可以知道属性的默认值是否相同

3针对低版本浏览器而言,标签用的越少越好。所以尽量少用且不用新标签。

再说HACK代码方式

什么是CSS hack?

针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。其实CSS hack是一种类似作弊的手段,以欺骗浏览器的方式达到兼容的目的,是用浏览器的兼容性差异来解决浏览器的兼容性问题。这种方法快捷、简单粗暴。

下面列出一些HACK代码:

1、 Firefox

@-moz-document url-prefix() {

.selector {

property: value;

}

}

2、 Webkit内核浏览器(chrome andsafari)

@media screen and(-webkit-min-device-pixel-ratio:0) {

Selector{ property: value; }

}

3、 Opera浏览器

@media all and (min-width:0) {

Selector{property: value;}

}

4、 IE9浏览器

:root Selector {property: value\9;}

5、 IE9以及IE9以下版本

Selector {property:value\9;}

6、 IE8浏览器

@media \0screen{

Selector{property: value;}

}

7、 IE8以及IE8以上的版本

Selector {property: value\0;}

8、 IE7浏览器

*+html Selector{property:value;}

*:first-child+html Selector{property:value;}

9、 IE7及IE7以下版本浏览器

Selector {*property: value;}

10、 IE6浏览器

Selector {_property/**/:/**/value;}

或者:

Selector {_property: value;}

或者:

*html Selector {property: value;}

如果大家需使用更多hack代码可以去下面的网站查询,主流浏览器的hack代码都有:

http://browserhacks.com/

忠告:

在Web页面制作中尽量不要使用CSS Hack来处理兼容问题。因为任何浏览器下出现渲染不一致都极有可能是我们自己的结构或样式不符合W3C的某些要求,或者说违背了浏览器的某些规则而造成的,所以我们应该尽量通过结构或CSS的修改来达到各浏览器渲染一致效果,除非到了万不得已情况下,才考虑CSS的Hack。

本文分享自微信公众号 - 我分享我快乐(duan_uid)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-02-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【倒计时7天】2018教育部-腾讯公司产学合作协同育人项目申请即将截止!

    腾讯高校合作
  • 中国互联网协会发布:《2018中国互联网发展报告》

    在2018中国互联网大会闭幕论坛上,中国互联网协会正式发布《中国互联网发展报告2018》(以下简称《报告》)。《中国互联网发展报告》是由中国互联网协会与中国互联...

    钱塘数据
  • 知识体系解决迷茫的你

    最近在星球里群里都有小伙伴说道自己对未来的路比较迷茫,一旦闲下来就不知道自己改干啥,今天我这篇文章就是让你觉得一天给你 25 个小时你都不够用,觉得睡觉都是浪费...

    桃翁
  • ISUX Xcube智能一键生成H5

    腾讯ISUX
  • 考研英语-1-导学

    英二图表作文要重视。总体而言,英语一会比英语二难点。不过就写作而言,英语二会比英语一有难度,毕竟图表作文并不好写。

    用户1335799
  • 理工男图解零维到十维空间,烧脑已过度,受不了啦!

    让我们从一个点开始,和我们几何意义上的点一样,它没有大小、没有维度。它只是被想象出来的、作为标志一个位置的点。它什么也没有,空间、时间通通不存在,这就是零维度。

    钱塘数据
  • 复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

    从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

    haifeiWu
  • 【系统设置】CentOS 修改机器名

    ken.io
  • SQL中GROUP BY用法示例

    GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

    Awesome_Tang
  • 不只是软件,在线也可以免费下载百度文库了。

    不管是学生,还是职场员工,下载各种文档几乎是不可避免的,各种XXX.docx,XXX.pptx更是家常便饭,人们最常用的就是百度文库,豆丁文库,道客巴巴这些下载...

    课代表

扫码关注云+社区

领取腾讯云代金券