一、跨浏览器的网页设计一直是让人很头疼的问题,这不只是因为浏览器的版本众多,还有一个重要的原因是相同浏览器的不同时期的版本也会有差异,甚至是在不同操作同台上还会有不同。因此使CSS hack技术进行浏览器区分是实现跨浏览器访问一个好方法。CSS Hack技术有很多,具体可以查看:

本文据说的主要是通过“.”,“>”,“*”,“_”来区分。以下是本人对这四种符号的测试结果: 
———————IE6——     IE7——IE8——FF2——FF3—     Opera9.5 
>property——     Y——     Y——     Y——     N——     N——     N 
.property——     Y——     Y——     Y——     N——     N——     N 
*property——     Y——     Y——     N——     N——     N——     N 
_property——     Y——     N——     N——     N——     N——     N

我们可以看到>property、.property、*property在各浏览器中的表现是一致的,只有_property在IE6和IE7、IE8中有所区别。另外还要注意的,IE6是不支持!important的,而其他几款浏览器都识别。

举例: 
要对想同的文字在不同浏览器中显示不同的颜色可以使用: color:brown !important;  /*用于Opera、Firefox2、Firefox3等现代浏览器*/   
>color:green !important;    /*IE7、IE8可以识别该规则,因此它覆盖掉了上一条规则*/    
color:red;  /*所有浏览器都可以识别,但是以上两条规则有!important,所以这条规则被忽视;只有IE6认识并覆盖掉上两条规则*/

color:brown !important;    /*用于Opera、Firefox2、Firefox3等现代浏览器*/ 
>color:green !important;      /*IE7、IE8可以识别该规则,因此它覆盖掉了上一条规则*/ 
color:red;    /*所有浏览器都可以识别,但是以上两条规则有!important,所以这条规则被忽视;只有IE6认识并覆盖掉上两条规则*/ 
因此这就实现了跨浏览器的表现问题。_property和*property也是一样的。对于_property来说,只有IE6才能识别,因此可以用于单独对IE6的设置中。

不过这里要注意书写的顺序:现在浏览器的写法要写在最前面,IE6的写法要写在最后面用于覆盖,其他浏览器写在中间。

二、其实主要是浏览器:IE6/IE7/firefox下,各个对CSS代码的解释有区别,下边转载一篇HACK的文章,相当实用。

区别IE6与FF:           background:orange;*background:blue;

区别IE6与IE7:          background:green !important;background:blue;

区别IE7与FF:           background:orange; *background:green;

区别FF/IE7/IE6:       background:orange;*background:green !important;*background:blue;

注:IE都能识别*标准浏览器(如FF)不能识别* 
IE6能识别*,但不能识别 !important 
IE7能识别*,也能识别!important 
FF不能识别*,但能识别!important

另外再补充一个,下划线"_", 
IE6支持下划线,IE7和firefox均不支持下划线。(推荐.我这只有这个有效!)

于是大家还可以这样来区分IE6、IE7、firefox 
: background:orange;*background:green;_background:blue;

三、最简单的CSS Hack: 区分 IE6 / IE7 /IE8 /Firefox

.color{
background-color: #CC00FF; /*所有浏览器都会显示为紫色*/
background-color: #FF0000\9; /*IE6、IE7、IE8会显示红色*/
*background-color: #0066FF; /*IE6、IE7会变为蓝色*/
_background-color: #009933; /*IE6会变为绿色*/
}

上面的样式解释为顺序是 ff、ie8、ie7、ie6显示的结果:
用 FF 浏览, 颜色是紫色
用 IE8 浏览,颜色是红色
用 IE7 浏览,颜色是蓝色
用 IE6 浏览,颜色是绿色

简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera的更多相关文章

  1. IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

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

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

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

  3. CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法

    关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HA ...

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

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

  5. CSS HACK区别IE6、IE7、IE8、Firefox兼容性

    相信不少人,都特别清楚CSS HACK,而其中也是区别IE6.IE7.IE8.Firefox兼容性问题用的,CSS hack由于不同的浏览器,对CSS的解析认识不一样,因此会导致生成的页面效果不一样. ...

  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/IE9/FF的CSS HACK写法

    HACK原理:不同浏览器对各中字符的识别不同 在 CSS中常用特殊字符识别表: (1)*:  IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!important: 除IE6 ...

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

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

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

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

随机推荐

  1. C# 常用的dialogresult reset 以及if else 等检查获取客户操作信息的操作方法

    DialogResult reset; reset= MessageBox.Show("请检查您的输入信息是否按照规则输入的", "信息输入好像有问题哦", M ...

  2. 观察者模式学习--使用jdk的工具类简单实现

    观察者模式学习之二:使用jdk的自带的工具类实现,与自己实现相比,两者有以下的区别: 1,自己实现,需要定义观察者的接口类和目标对象的接口类.使用java util的工具类,则不需要自己定义观察者和目 ...

  3. Http协议[Get和Post]详解

    (2012-11-27 11:23:26) 标签: android http get post mars 分类: Android系列 访问url,需要连接网络.所以,首先应该添加Manifest权限: ...

  4. 简述afinal 框架的基本用法

    本文只是对afinal做简单的描述,基本和git上给的文档一样,大神绕道! FinalDB模块本文为涉及到 FinalActivity模块,FinalHttp模块,FinalBitmap模块  代码体 ...

  5. C#操作FTP, FTPHelper和SFTPHelper

    1. FTPHelper using System; using System.Collections.Generic; using System.IO; using System.Net; usin ...

  6. mysql存储过程执行权限问题

    tags: mysql  PROCEDURE 存储过程 definer SECURITY 权限 以下存储过程,限定了DEFINER为root,也就是root之外的账户是无法调用这个存储过程的. 1 2 ...

  7. 如何配置DNS服务器(局域网——域名指向某个IP地址)

    单击“开始”,指向“管理工具”,然后单击“DNS”,打开 DNS 管理器.   如有必要,向管理单元添加适用的服务器,然后连接该服务器.在控制台树中,单击适用的 DNS 服务器.   在“操作”菜单上 ...

  8. js 获取字符串中最后一个斜杠后面的内容

    var str = "/asdasf/asfaewf/agaegr/trer/rhh"; var index = str .lastIndexOf("\/"); ...

  9. 用Sqlplus手动创建Oracle11g数据库

    用Sqlplus手动创建Oracle数据库 刚开始学习Oracle数据库,菜鸟一个,使用sqlplus创建数据库遇到了很多问题,通过不断地百度,终于创建成功了.所以顺便把整个过程中犯的一些最低级的错误 ...

  10. TI IPNC Web网页之流程分析

    流程 Appro IPNC使用的web服务器是boa. 请仔细理解下面这段话. boa这个web服务器是GUI界面和IPNC应用程序之间的通信的桥梁.它的责任是从web GUI中接收HTTP请求,并且 ...