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

自从安装了IE8.0正式版本!木头就对基本的几个 CSS
HACK的做一下归纳!希望对网页前端布局DIV+CSS的实施者有所帮助!

本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象

HACK原理:不同浏览器对各中字符的识别不同
(读完文章你会发现,FF和IE8对以下字符的识别能力完全相同)

在
CSS中常用特殊字符识别表:

(1)* : IE6+IE7 都能识别*,而标准浏览器FF+IE8是不能识别*的;

(2)!important :
除IE6不能识别 !important外, FF+IE8+IE7 都能识别!important
;

(3)_ : 除IE6 支持_ 外, FF+IE8+IE7都不支持_;

(4)\9 :所有IE 浏览器都识别(IE6、IE7、IE8、IE9)

示例:

(1)区别FF(IE8)与IE6
IE7

backgorund:orange; FF和IE8背景色将为橘黄色

*backgorund:red; IE6和IE7背景色将为红色

(2)区别FF(IE8)与IE6与IE7

background:orange; FF和IE8背景色将为橘黄色

*background:red
!important; IE7背景色将为红色

*background:blue; IE6背景色将为蓝色

(3)区别FF(IE8)与IE6与IE7

background:orange; FF和IE8背景色将为橘黄色

*background:red; IE7背景色将为红色

_background:blue; IE6背景色将为蓝色

(4)区别FF与IE6
IE7 E8

color:gray;
FF等非IE浏览器字体色将为灰色

color:red\9;
IE8 IE9字体色将为红色

*color:green;
IE7字体色将为绿色

_color:blue;
IE6字体色将为蓝色

提示:CSS
HACK书写顺序:先写FF等非IE浏览器所需样式，其次写IE8所需样式，接着是IE7的，再接着才是IE6的！

总结:实际运用中我感觉比较少用到!important
,只要你记住"*"和"_"我想就足够区别于FF(IE8)与IE6与IE7了.

==========================================================

1、Css if hack条件语法
< !--[if IE]>
Only IE <![endif]-->
仅所有的WIN系统自带IE可识别
< !--[if IE 5.0]> Only IE 5.0
<![endif]-->
只有IE5.0可以识别
<
!--[if gt IE 5.0]> Only IE 5.0+
<![endif]-->
IE5.0包换IE5.5都可以识别
< !--[if lt IE 6]> Only IE 6-
<![endif]-->
仅IE6可识别
< !--[if
gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6以下的IE5.x都可识别

仅IE7可识别
< !--[if
gte IE 7]> Only IE 7/+
<![endif]-->
IE7以及IE7以下的IE6、IE5.x都可识别

仅IE8可识别

仅IE9可识别

注：在 if 后加 lt gte有不同效果（参加其它参数同理）

<!–[if IE 8]> = IE8 仅IE8可识别
<!–[if lt IE 8]> = IE7或更低版本

<!–[if gte IE 8]> = 高于或者等于IE8版本

2、DIV+CSS实例
CSS实例一：
让IE6-IE8显示不同的内容，DIV CSS代码如下：

<!DOCTYPE
html>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>DIV
IF条件实例</title>
</head>
<body>
你正在使用：

<!--[if IE 9]>

<h2>IE9</h2>
<![endif]-->
<br><br>
<strong>说明</strong>：如果你的浏览器版本为多少即会显示IE多少，针对IE6-IE9实验</body>
</html>

说明：以上针对不同IE显示不同网页内容DIV+CSS实例实验。

DIV+CSS实例二 ：
让IE6-IE8显示不同CSS样式效果，DIV CSS代码如下：

<!DOCTYPE
html>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>CSS
IF条件hack实例</title>

<!--[if IE 7]>

</head>
<body>
<div
class="divcss">
DIV
CSS实验提示：<br>
我在IE6下是红颜色，在IE7下是黄颜色,在IE8下是蓝颜色,在IE9下是黑色
</div>
</body>
</html>

随机推荐

#技塑人生# windows2008无法远程— 注册表缺失键值导致高级防火墙服务异常
windows2008无法远程— 注册表缺失键值导致高级防火墙服务异常阿里云技术支持中心:章阿贵一.远程无法访问(windows server 2008) 症状:无法远程但是系统内网络正常,防火墙 ...
源自梦想自定义ViewGroup的整理_2
Android项目: 1.准备资源图片.图片放到hdip里和mdip里对想过的影响:对于320*480的模拟器,默认去mdip里去找图片资源,拿过来的图片可以直接用,清晰度不变.要是所要找的图片在hd ...
基于阿里云ECS的phpwind网站备案前如何远程访问调试？
基于阿里云ECS的phpwind网站部署非常方便,但云主机的外网IP绑定域名却比较复杂.先要申请域名,成功后还需要备案.尤其是企业网站备案,需要提交的资料较多,准备资料以及审批的时间较长.这段时间在外 ...
Java Script基础（十二）正则表达式
一.正则表达式中常用的符号虽然可以使用string函数来完成验证,但是这种验证方式不够严谨,而且编写比较麻烦.而正则表达式是一种描述字符模式的对象,由一些特殊的符号组成,其组成的字母模式用来匹配各种 ...
Jax-ws开发实例
初次接触Jax-ws(Java API xml web Service)感觉挺简单的,在这里写下我的所学的: 大概的顺序是:首先定义接口 ,然后写接口的实现类,最后编写客户端.步骤是挺简单的,来看看代 ...
div/span等获取焦点问题(tabindex属性的简单理解)
1.先看问题当我们要对一个div/span元素获取焦点的时候,直接对$("#div1").focus()是不能实现效果的,比如下图: 当点击输入框进行输入后,在点击区域弹出选择地 ...
CSS3笔记
CSS/CSS3在线手册:http://www.css119.com/book/css/ CSS3实现水平垂直居中:http://bbs.html5cn.org/thread-87300-1-1. ...
Mousetrap - Keyboard shortcuts in Javascript
Mousetrap is a simple library for handling keyboard shortcuts in Javascript. It is around 2kb minifi ...
WEB系统架构
客户端方向:框架+控件+模板+元数据辅助:懒加载+合并请求+异步任务+推送+缓存技术:reactjs,requirejs,jquery,angularjs,bootstrap,ant.design,f ...
.NET程序编译和运行
一次面试的时候遇到的一道题目,简要说明.NET的编译过程,在网上看了很多资料,简单总结如下: 1.一般的编译过程通常高级语言的程序编译过程是:首先写好的程序是源代码,然后编译器编译为本地机器语言,最 ...

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

最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语法操作说明的更多相关文章

随机推荐

热门专题