区分IE8/IE7/IE6及其他浏览器
在 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的！
以下代码之间的空格是必要的，缺少空格导致失效
/*---------------------------------媒体查询hack [[---------------------------------*/
/* 只支持IE6、7 */
@media screen\9 {...}
/* 只支持IE8 */
@media \0screen {...}
/* 只支持IE6、7、8 */
@media \0screen\,screen\9 {...}
/* 只支持IE8、9、10 */
@media screen\0 {...}
/* 只支持IE9、10 */
@media screen and (min-width:0\0) {...}
/* 只支持IE10 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {...}
/* 支持IE9、Chrome、Safari、Firefox、 Opera */
@media all and (min-width:0){...}
/* 只支持wekit内核浏览器Chrome、Safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {...}
/* 只支持Opera */
@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {...}
/* 只支持Firefox */
@-moz-document url-prefix() {...}
例如：
<p class="class">@hack@hack@hack@hack@hack@hack</p>
<style type="text/css">
@media all and (min-width:0){ /* 在IE9文本颜色为红色*/
.class{color:#F00;}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) { /* 在Chrome、Safari中文本颜色为绿色 */
.class{color:#0F0;}
}
@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) { /* 在Opera中文本颜色为蓝色 */
.class{color:#00F;}
}
@-moz-document url-prefix() { /* 在Firefox中文本颜色为品红色 */
.class{color:#F0F;}
}
</style>
/*---------------------------------媒体查询hack ]]---------------------------------*/
/*---------------------------------选择器hack [[---------------------------------*/
/* 只支持IE7 */
html* 选择器{}
/* 仅支持IE7 使用该选择器需要HTML顶部有声明：<!DOCTYPE HTML ......>*/
*+html 选择器{}
/* 只支持IE6 */
*html 选择器{}
如:
<p class="class">选择器hack选择器hack选择器hack选择器hack选择器hack选择器hack</p>
html* .class{color:#F00;} /* 在IE7中文本颜色为红色 */
*+html .class{color:#0F0;} /* 在IE7中文本颜色为绿色 */
*html .class{color:#00F;} /* 在IE6中文本颜色为蓝色 */
/*---------------------------------选择器 hack ]]---------------------------------*/
/*---------------------------------属性hack [[---------------------------------*/
/* 只支持IE6、7、8、9、10 */
选择器{属性：属性值\9;}
/* 只支持IE8、9、10 */
选择器{属性：属性值\0;}
/* 支持IE8的部分属性值、完全支持IE9、10 */
选择器{属性：属性值\9\0;}
/* 仅支持IE7和IE6 */
选择器{*属性：属性值;}
/* 只支持IE6 */
选择器{_属性：属性值;}
/* 只不支持IE6 */
选择器{属性：属性值!important;}
/* 仅支持Safari和Chrome ，且只能放在选择器的最后一个属性，因为当浏览器解析[;;]后，不会再读取后面属性 */
选择器{[;属性:属性值;]}
如：
<p class="class">属性hack属性hack属性hack属性hack属性hack属性hack</p>
<style type="text/css">
.class{
color:#F00\0;/* 在IE8和IE9中文本颜色为红色 */
*color:#0F0; /* 在IE7中文本颜色为绿色 */
_color:#00F; /* IE6中颜色为蓝色 */
[;color:#F0F;]/* 在Safari和Chrome中颜色为品红色 */
}
</style>
建议是：尽量写出无hack的结构和样式，做到可以向后兼容，减少多余代码，更加可以体现自己专业化的态度。
如果 觉得文章不错，可以请博主喝一杯奶茶哦！！！
区分IE8/IE7/IE6及其他浏览器的更多相关文章
- 区分IE8/IE7/IE6及其他浏览器-CSS “\9″
区分IE8/IE7/IE6及其他浏览器-CSS “\9″ 原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] by zhangxinxu from h ...
- 区分IE9/IE8/IE7/IE6及其他浏览器-CSS hack
记录一下这些浏览器的hack如下: 一.IE9以及以下版本浏览器 对于IE8及其以下版本的浏览器,就是使用本文标题所提到的”\9″ hack.如下代码: .ie8_9{ color:blue; /*所 ...
- jquery 1.9 1.8 判断 浏览器（IE11,IE8,IE7,IE6）版本
1.9以后很我方法删除了,所有和之前版本判断浏览器版本有所差记录一下 1.9 ------------------------------------------------------------- ...
- 如何让ie8/ie7/ie6支持html5的<footer></footer><nav></nav>等标签
使用他们能让代码语义化更直观,而且更方便SEO优化.但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理.以下就介绍几种方式. 方式一:Coding JavaS ...
- 针对IE6,IE7,IE8,IE9,FF等不同浏览器的CSS写法
首先我们介绍一下HACK原理,就是不同浏览器对字符的识别不同 在 CSS中常用特殊字符识别表: (1)*: IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!importan ...
- IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总
断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1: ...
- bootstrap支持ie8 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
做一个在线系统,PC端也要做,但要兼容千恶的IE8[IE6 是万恶,打死我都不会管IE6],IE8 是我底线了md, 在IE8下 bottstrap 错乱,变形,不支持一些属性的问题,下面看了一篇 某 ...
- html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...
- 【Bootstrap】一个兼容IE8、谷歌等主流浏览器的受众门户式风格页面
上一次写的<[Bootstrap]一个兼容IE8.谷歌等主流浏览器的受众巨幕式风格页面>(点击打开链接) 部分老一辈的需求可能对这样的后现代的风格并不惬意, 没关系,我们全然能够改变布局 ...
随机推荐
- Python_线程、线程效率测试、数据隔离测试、主线程和子线程
0.进程中的概念 三状态:就绪.运行.阻塞 就绪(Ready):当进程已分配到除CPU以外的所有必要资源,只要获得处理机便可立即执行,这时的进程状态成为就绪状态. 执行/运行(Running)状态:当 ...
- org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax; check the manu
这个是sql 语句 错误 仔细检查 SQL语句是否写错了 org.apache.ibatis.exceptions.PersistenceException: ### Error queryi ...
- spring boot中log4j冲突问题和解决办法
Spring Boot中自带了log4j日志管理.写法应该是: private static final Logger logger = Logger.getLogger(XXX.class); 而不 ...
- 在Laravel中使用数据库事务以及捕获事务失败后的异常
Description 在Laravel中要想在数据库事务中运行一组操作,则可以在 DB facade 中使用 transaction 方法.如果在事务的闭包内抛出异常,事务将会被自动还原.如果闭包运 ...
- K3 WISE安全认证方式
k/3中间层注册三种安全认证方式: 交互式用户方式,网络服务方式,信任方式,是指组件服务中生成的COM+应用程序中的组件包的运行账户(注册中间层后产生很多ebo开头的和kdsvrmgr组件包). 三种 ...
- PreparedStatement和Statement
1 . PreparedStatement 接口继承 Statement , PreparedStatement 实例包含已编译的 SQL 语句,所以其执行速度要快于 Statement 对象. 2 ...
- Spring Boot(1)——开发你的第一款Spring Boot应用(Edition1)
Spring Boot(1)——开发你的第一款Spring Boot应用(Edition1) 准备工作: java:java 8 或者 java 9: Spring框架:5.0.8.RELEASE或以 ...
- flutter屏幕适配
现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同, 比如我们的设计稿一个View的大小是300px,如果直接写300px,可能在当前设备显示正常,但到了其他设 ...
- 腾讯机试题 AcWing 603 打怪兽
题目链接:https://www.acwing.com/problem/content/605/ 题目大意: 略 分析: 用dp[i][j]表示用j元钱能在前i只怪兽上所能贿赂到的最大武力值. 有一种 ...
- LODOP字体不识别 英文字母连起来 引号不正常
打印超文本的时候,有时候会发现html中设置的css样式显示不正常,字体根本不是设置的字体,这种情况有可能是:1.该操作系统没有安装自己指定的那种字体,那么没有安装自然就不能显示设置的字体.2.该操作 ...