css hack相关记录
钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>
CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome 等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效 果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
常用的CSS hack方式
(1)方式一 条件注释法
只在IE下生效
<!--[if IE]> 这段文字只在IE浏览器显示 <![endif]-->
只在IE6下生效
<!--[if IE 6]> 这段文字只在IE6浏览器显示 <![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]> 这段文字只在IE6以上(包括)版本IE浏览器显示 <![endif]-->
只在IE8上不生效
<!--[if ! IE 8]> 这段文字在非IE8浏览器显示 <![endif]-->
非IE浏览器生效
<!--[if !IE]> 这段文字只在非IE浏览器显示 <![endif]-->
(2)方式二 类内属性前缀法
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期的页面展现效果。
IE浏览器各版本 CSS hack 对照表
hack |
写法 |
实例 |
IE6(S) |
IE6(Q) |
IE7(S) |
IE7(Q) |
IE8(S) |
IE8(Q) |
IE9(S) |
IE9(Q) |
IE10(S) |
IE10(Q) |
* |
*color |
青色 |
Y |
Y |
Y |
Y |
N |
Y |
N |
Y |
N |
Y |
+ |
+color |
绿色 |
Y |
Y |
Y |
Y |
N |
Y |
N |
Y |
N |
Y |
- |
-color |
黄色 |
Y |
Y |
N |
N |
N |
N |
N |
N |
N |
N |
_ |
_color |
蓝色 |
Y |
Y |
N |
Y |
N |
Y |
N |
Y |
N |
N |
# |
#color |
紫色 |
Y |
Y |
Y |
Y |
N |
Y |
N |
Y |
N |
Y |
\0 |
color:red\0 |
红色 |
N |
N |
N |
N |
Y |
N |
Y |
N |
Y |
N |
\9\0 |
color:red\9\0 |
粉色 |
N |
N |
N |
N |
N |
N |
Y |
N |
Y |
N |
!important |
color:blue !important;color:green; |
棕色 |
N |
N |
Y |
N |
Y |
N |
Y |
N |
Y |
Y |
说明:在标准模式中
“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效,是IE9/10的hack
(3)CSS hack方式三:选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
目前最常见的是
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...} 只对IE6/7生效
@media \0screen {body { background: red; }} 只对IE8有效
@media \0screen\,screen\9{body { background: blue; }} 只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等
实例:
/*该demo实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack,注意顺序 IE6显示为:绿色, IE7显示为:黑色, IE8显示为:红色, IE9显示为:蓝色, Firefox/Chrome显示为:橘色, (本例IE10效果同IE9,Opera最新版效果同IE8) */ .iehack{ background-color:orange; /* all - for Firefox/Chrome */ background-color:red\0; /* ie 8/9/10/Opera - for ie8/ie10/Opera */ background-color:blue\9\0; /* ie 9/10 - for ie9/10 */ *background-color:black; /* ie 6/7 - for ie7 */ _background-color:green; /* ie 6 - for ie6 */ +background-color:#a200ff; /*IE6、7*/ .background-color:#00deff\9; /*IE6、7、8*/ }
- 『windows编程』WinSock相关记录
- SQL2000中在查询后的记录集合继续查询相关的记录(嵌套查询)
- Cordova学习笔记 cordova相关的安装记录 及项目建立
- Jquery Validation 相关使用记录
- android 打包相关问题记录
- 屏幕适配相关记录
- maven 相关命令记录
- echarts相关问题记录
- 巡检系统相关记录
- T-SQL 选择某一记录的前后相关记录
- 记录一下JAVASCRIPT中多线程相关的几篇文章
- Ubuntu装机相关记录
- MySQL 相关资源网站记录
- Cloud测试相关信息记录
- 【记录】JS正则表达式的相关方法(正则学习笔记1)
- aspnetdb.mdf 相关记录(备查)
- Android音频相关记录
- Extjs3.X TabPanel相关记录(持续更新)
- ROS入门的相关知识点总结 以及 记录的坑
- [Oracle]学习相关网址记录