Hack--兼容性测试

CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识。等等

选择器Hack:比如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。等等

HTML[1] 头部引用(if IE)Hack:针对所有IE:<!--[if IE]><!--您的代码--><![endif]-->,针对IE6及以下版本:<!--[if lt IE 7]><!--您的代码--><![endif]-->,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

书写顺序,一般是将识别能力强的浏览器的CSS写在前面。下面如何写里面说得更详细些。

选择不同的浏览器及版本

尽可能减少对CSS Hack的使用。Hack有风险,使用需谨慎

通常如未作特别说明,本文档所有的代码和示例的默认运行环境都为标准模式。

一些CSS Hack由于浏览器存在交叉认识,所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。

简单列举几个:

* html .test{color:#090;} /* For IE6 and earlier */

* + html .test{color:#ff0;} /* For IE7 */

.test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */

.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */

内部属性Hack

CSS内部属性级Hack

语法:selector{<hack>?property:value<hack>?;}

取值:

_: 选择IE6及以下。连接线(中划线)(-)亦可使用,为了避免与某些带中划线的属性混淆,所以使用下划线(_)更为合适。

*:选择IE7及以下。诸如:(+)与(#)之类的均可使用,不过业界对(*)的认知度更高。

\9:选择IE6+。

\0:选择IE8+和Opera。

[;property:value;]; 选择webkit核心浏览器(Chrome,Safari)。IE7及以下也能识别。中括号内外的3个分号必须保留,第一个分号前可以是任意规则或任意多个规则。 [;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。生效的始终是中括号内的最后一条规则,所以通常选用第一种写法最为简洁。

说明:一些CSS Hack由于浏览器存在交叉认识,所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。如下面这个例子:如想同一段文字在IE6,7,8,chrome,safari,显示为不同颜色,可这样写[2] :

.test{

color:#000; /* 正常写法普遍支持 */

color:#00F\9; /* 所有IE浏览器(ie6+)支持 */

/*但是IE8不能识别“ * ”和“ _ ” */

[color:#000;color:#0F0; /* SF,CH支持 */

color:#00F\0; /* IE8支持*/

*color:#FF0; /* IE7支持 */

_color:#F00; /* IE6支持 */

}

注意了:[2] 不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

补充:IE6能识别 *,但不能识别 !important,IE7能识别 *,也能识别!important;FF不能识别 *,但能识别!important;下划线”_“,IE6支持下划线,IE7和firefox均不支持下划线[2] 。

Hack--兼容性测试

时间: 2024-10-11 21:55:28

Hack--兼容性测试的相关文章

关于css伪类的一些兼容性测试

测试环境:xp ,ie7~8  chrome. link 伪类 :(:link,:visited)  这个是链接专用 动态伪类 :(:hover,:active,:focus) <!DOCTYPE html> <html> <head></head> <style type="text/css"> a:link,input:hover{color:blue;} a:visited{color:green;} a:active{

兼容性测试(1)

笔者从事测试工作已快三年,属于成长中的小蜗牛.上周对小组成员分享了如何进行兼容性测试.今天闲来无事也开始对自我进行总结.随着移动互联网的快速发展,使整个软件行业也快速发展,越来越多的人加入互联网或者说是我们的生活已经与互联网息息相关.密不可分.二十一世界是一个以提供优质服务为企业目标的时代,使得我们软件行业对客户体验越发看重,促使我们对自有产品的兼容性要求也越来越高,以无明显兼容性问题.夸平台的高质量标准进行开发.以下是笔者对兼容性测试的总结,如有错误.或者不足请谅解,也请告知鄙人的不足之处,笔

Android兼容性测试框架(CTS)手册

了解老码农个人隐私,请看这里:http://www.koulianbing.com/?page_id=12 本文翻译自Android官方的CTS手册android-cts-manual-r4.pdf Android兼容性测试框架手册 1.为什么需要兼容性测试(以下称CTS)? 1.1.让APP提供更好的用户体验.用户可以选择更多的适合自己设备的APP.让APP更稳定. 1.2.让开发者设计更高质量的APP. 1.3.通过CTS的设备可以运行Androidmarket. 另外,CTS是免费的,而且

浏览器兼容性测试的分类

浏览器在Web系统中的一个非常重要的组成部分,它关系到软件产品最终的展现形式,直接与用户打交道.同一个Web页面在不同的浏览器上可能有不同的效果,而用户也有各不相同的使用浏览器的习惯,既有使用主流浏览器的也有使用非主流的(比如作者,用的是Opera,碰到过很多网页都有兼容性的问题……)所以,为了保证我们的软件产品能够面向大多数的用户,浏览器的兼容性测试在Web测试中占据了十分重要的作用. 现在市面上的浏览器种类可谓玲琅满目,有大家所熟知的IE.Firefox.Chrome.傲游.360安全浏览器

Android兼容性测试_CTS-环境搭建、测试执行、结果分析

为了确保Android应用能够在所有兼容Android的设备上正确运行,并且保持相似的用户体验,在每个版本发布之时,Android提供了一套兼容性测试用例集合(Compatibility Test Suite, CTS)来认证运行Android系统的设备是否完全兼容Android规范,并附带有相关的兼容性标准文档(Compatibility Definition Document, CDD). 首先从http://source.android.com/compatibility/download

HTML5的兼容性测试

HTML5做好后需要进行兼容性测试,保证产品上线后没有重大bug. 在测试过程中,主流使用的浏览器有: 1.chrome49.0.2623.75 2.360浏览器兼容模式(8.1.1.202,内核版本45.0.2454.101) 3.360浏览器极速模式 4.360极速浏览器ie11模式(8.5.0.136) 5.360极速浏览器兼容模式 6.360极速浏览器极速模式 7.Safari5.1.7(7534.57.2) 8.Ie11(11.0.9600.18282) 9.搜狗6.1.5.20958

Robot Framework 使用1-环境配置及简单网站兼容性测试(转)

0.Robot Framework 简介 Robot Framework 是一个通用的自动化测试框架,主要用于“验收测试”和“验收测试驱动开发(ATDD)” (会其它文章中会详细介绍ATDD).它使用的是表格式的测试数据语法,并且实现了关键字驱动测试策略.其测试能力可以使用测试库进行扩展,测试库可以使 用Python或Java方法进行编写,并且用户可以从现有的关键字中扩展出新的关键字. 1.环境配置 Robot Framework 是python开发的开源测试框架,在使用时,需要安装python

兼容性测试心得分享

有多少朋友做过浏览器兼容性测试?怎么做的,效率怎么样,是在不同的机器上下载不同的浏览器进行效果确认?有多少人对浏览器的兼容性测试犯过愁? 本人曾经也对浏览器的兼容性感到头痛,后来到网上找了些资料和工具,虽然未能彻底解决所遇到的问题,不过多少有些帮助,特此分享给大伙,若大伙有什么更好的工具或是经验方法还希望能拿出来晒一晒. 鄙人主要尝试过这几个工具:IETester, SuperPreview,Browsershots,Browser Sandbox.下面分别说一下. IETester 估计工作两

12款很棒的浏览器兼容性测试工具推荐

对于前端开发工程师来说,确保代码在各种主流浏览器的各个版本中都能正常工作是件很费时的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,让我们一起看看这些很棒的工具. Spoon Browser Sandbox 点击你需要测试的浏览器环境,安装插件就可以进行测试了.帮助你测试网页在Safari.Chrome.Firefox和Opera浏览器中是否正常,IE以前也有的,网站上说应微软的要求去掉了. Superpreview 这是为微软自己发布的跨浏览器测试工具,您可以同时查看您的网页在多个

Android CTS(兼容性测试)整个流程

为了保证开发的应用在所有兼容Android的设备上正常运行,并保证一致的用户体验,Google制定了CTS(Compatibility Test Suite)来确保设备运行的Android系统全面兼容Android规范,Google也提供了一份兼容性标准文档(Compatibility Definition Document, CDD). 在进行CTS之前,需要先从google官网下载相关文件,需要自卑梯子翻墙.下载链接: http://source.android.com/compatibil