浏览器兼容问题一直是前段开发工程师比较头痛的问题,熟悉了里面的规则也就变得简单了,这里有一份资料可以分享给大家,大家平时开发过程中遵循这个规律的话,会变得轻松多了:

各浏览器CSS hack兼容表:

  IE6 IE7 IE8 Firefox Chrome Safari
!important   Y   Y    
_ Y          
* Y Y        
*+   Y        
\9 Y Y Y      
\0     Y      
nth-of-type(1)         Y Y

代码示例:

#test{ color:red; /* 所有浏览器都支持 */ color:red !important;/* Firefox、IE7支持 */ _color:red; /* IE6支持 */ *color:red; /* IE6、IE7支持 */ *+color:red; /* IE7支持 */ color:red\9; /* IE6、IE7、IE8支持 */ color:red\0; /* IE8支持 */ }

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

整体测试代码示例:

.test{ color:#000000; color:#0000FF\0; [color:#00FF00; *color:#FFFF00; _color:#FF0000; }

其他说明:

1、如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题,此代码如下: <meta http-equiv=”x-ua-compatible” content=”ie=7″ />

2、body:nth-of-type(1) 如果这样写,表示全局查找body,将会对应第一个<body>。

3、还有其他写法,比如: *html #test{}或者 *+html #test{}

4、*+html 对IE7的hack 必须保证HTML顶部有如下声明:

http://www.w3.org/TR/html4/loose.dtd

5、顺序:Firefox、IE8、IE7、IE6依次排列。

小知识:什么是CSS hack?

  由于不同的浏览器,比如IE6、IE7、IE8、Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。

  这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

  这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。

IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表的更多相关文章

  1. 兼容IE6,IE7和firefox可以使用的一些css hack:

    .一些问题是浏览器自身的问题,遇到问题发生无法避免的情况下,那就要考虑使用一些css hack了,以下是针对IE6,IE7和firefox可以使用的一些css hack:(1) a: 针对区别IE6 ...

  2. 兼容IE6/IE7/IE8/FireFox的css hack

    兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...

  3. 浏览器的差距、ie6 ie7 ie8、符号、html css、BFC、

    1.浏览器的差距 浏览器默认的字体是16px,谷歌的最小字体是12px,其他是10px 2.ie6.ie7.ie8. hack:就是针对不同的浏览器去不同的html,css样式,从而让各个浏览器能达到 ...

  4. meta 标签代码解决IE兼容问题,IE6,IE7,IE8,IE9,IE10(包括360的兼容模式)

    最近做了一个项目,客户反映,在360下布局错位,远程调试了一下,发现客户使用的是360的兼容模式,然而我在自己的电脑上测试的时候是正常的(兼容模式也正常):简单研究了一下360的兼容模式,在360的兼 ...

  5. CSS hack兼容表

    IE6 IE7 IE8 Firefox Opera Safari !important Y Y Y Y Y _ Y * Y Y *+ Y \9 Y Y Y \0 Y nth-of-type(1) Y ...

  6. 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语法操作说明

    自从安装了IE8.0正式版本!木头 就对基本的几个 CSS HACK的做一下归纳!希望对网页前端布局DIV+CSS的实施者有所帮助! 本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象 ...

  7. IE6 IE7 IE8 的函数声明和函数表达式的实现与其他浏览器有差异

    标准参考 函数声明和函数表达式 定义一个函数有两种途径:函数声明和函数表达式. 函数声明: function Identifier ( FormalParameterList opt ) { Func ...

  8. CSS兼容IE6 IE7 IE8 IE9 Firefox的总结

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 针对firefox ie6 ie7 ie8的css样式中的line-height属性

    针对firefox ie6 ie7 ie8的css样式中的line-height属性 以前我们大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7以上对! ...

随机推荐

  1. C++语言-08-命名空间

    概述 命名空间通常作为附加信息来区分不同库中相同名称的函数.类.变量.命名空间的本质是定义一个范围,该范围即为一个上下文,一个上下文中通常不允许出现相同名称的函数.类.变量. 定义 定义格式 普通的命 ...

  2. 数据结构--用Objective-C简单实现的数据结构:栈

    前言:最近在学习数据结构,这里用Objective-C简单实现了一下栈.用Objective-C确实好容易,因为我使用了Cocoa框架提供了NSMutableArray作为存储元素的集合,操作集合元素 ...

  3. C#复习①

    C#复习① 2016年6月15日 08:19 Main Introduction of C# 简单介绍C# 1. C# is very similar to Java (70% Java, 10% C ...

  4. Maven基础使用

    常用命令 mvn clean:清除maven的编译结果 mvn compile:编译 mvn package:编译.打包 mvn install:编译.打包.部署 –DskipTests:编译测试用例 ...

  5. ORACLE 查看RMAN的备份信息总结

    关于Oracle数据库的RMAN备份,除了邮件外,是否能通过其它方式检查RMAN备份的成功与失败呢?其实我们可以通过下面SQL脚本来检查某个时间段备份失败的记录: SELECT * FROM V$RM ...

  6. OOP应用:实体类

    实体类 定义:实体类是一个业务实体的类,而业务实体就是整个软件系统业务所涉及的对象. 使用: 1.新增实体类项目,增加类库项目,以.Modes作为后缀. 2.抽取对象以及属性.(简单地说,对象就是每个 ...

  7. 烂泥:学习ssh之ssh密钥随身携带

    本文由秀依林枫提供友情赞助,首发于烂泥行天下 在上一篇文章<烂泥:学习ssh之ssh无密码登陆>中,我们讲解了如何使用ssh密钥,免密码登陆服务器. 这篇文章我们再来讲解,如何把已经生成的 ...

  8. WIN 下的超动态菜单(二)用法

    WIN 下的超动态菜单(一)简介 WIN 下的超动态菜单(二)用法 WIN 下的超动态菜单(三)代码 作者:黄山松,发表于博客园:http://www.cnblogs.com/tomview/     ...

  9. javascript日历控件——纯javascript版

    平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. < ...

  10. 【转】XPath 示例

    XPath 示例   其他版本   本主题回顾整个 XPath 参考中出现的语法示例. 所有示例均基于 XPath 语法的示例 XML 文件 (inventory.xml). 有关在测试文件中使用 X ...