CSS hack 详解
来源:互联网 发布:淘宝闹鬼的古着店 编辑:程序博客网 时间:2024/06/05 02:58
直到今天以前,做页面我都没有考虑过兼容性,总想着,开发的时候能用就可以了,只要求页面保持整洁,功能可用,就算其他浏览器有问题也不管,只认为是浏览器版本低,和我没有关系。
然后早上周会接到任务说要把页面改一下兼容chrome,顿时很头疼啊,以前也没考虑过这方面,不知道从何下手,于是去网上查了一下,了解了一下大概,先贴一点大概的理论吧。。。(以下是在博客园搜到的兼容IE的方法,较为详细,先Mark,其他的还在寻找中~)
什么是CSS hack
由于不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,导致生成的页面效果不一致,写出针对不同浏览器CSS code就称为CSS hack。
常用的CSS hack 有三种方式,CSS 内部hack、选择器hack、HTML 头部引用,其中第一种最常用。
常用的CSS hack 有三种方式,CSS 内部hack、选择器hack、HTML 头部引用,其中第一种最常用。
CSS 内部hack
正经的CSS是这么写的
<!DOCTYPE html><html> <head> <title>Test</title> <style type="text/css" > .test { background-color:green; } </style> </head> <body> <div class="test" style="height:100px; width:100px; line-height:100px; margin:50px; border:1px solid #000;"></div> </body><html>
这样的代码对于所有当前常用的浏览器都是好使的,结果应该是这样子的
但是在CSS3中常见一些这样的写法
/*Mozilla内核浏览器:firefox3.5+*/ -moz-transform: rotate | scale | skew | translate ; /*Webkit内核浏览器:Safari and Chrome*/ -webkit-transform: rotate | scale | skew | translate ; /*Opera*/ -o-transform: rotate | scale | skew | translate ; /*IE9*/ -ms-transform: rotate | scale | skew | translate ; /*W3C标准*/ transform: rotate | scale | skew | translate ;
如果没有注释乍一看还以为逆天了,这样的代码都好使!这样的代码确实好使,CSS3目前标准还没有统一,各个浏览器都有自己的表现方式,甚至有的实现,有的未实现,在前面加一些前缀以表示支持某个特定浏览器,这也是CSS 内部hack的基本原理,向上面这些简单易懂,但是真正的CSS hack 远远不止于此,因为有不死的IE6及其各种奇葩的兄弟版本。
CSS 内部hack 语法是这样的 selector{<hack>?property:value<hack>?;} ,上面代码所示的是在属性名称之前的hack,当然还有这样的
*background-color:green;
属性前面加个“*”这样的写法只会对IE6、7生效,其它版本IE及现代浏览器会忽略这条指令(没有特殊说明,本文所有hack都是指在声明了DOCTYPE的文档的效果)
-background-color:green;
属性前面有个“-”这样的只有IE6识别,还有些在后面的hack
background-color:green!important;
这样在属性值后面添加“!important”的写法只有IE6不能识别,其它版本IE及现代浏览器都可以识别,还有“+”、“\0”、”\9” 等,乱七八糟好烦,画个表
IE6IE7IE8IE9IE10现代浏览器* + - !important \9 \0 \9\0这样就清楚多了吧。如果只想给上面的test DIV在IE访问的时候加绿色背景,就可以这么写
background-color:green\9;
如果想IE6红色,IE7绿色,其它黄色(当然没人这么无聊)就可以这么写
background-color:green;+background-color:green;_background-color:green;
选择器hack
选择器hanck主要是针对IE浏览器,其实并不怎么常用,语法是这样的:<hack> selector{ sRules }
IE6IE7IE8IE9IE10现代浏览器*html *+html :root针对IE9的hack可以这么写
:root .test{ background-color:green;}
HTML头部引用
HTML头部引用就比较特殊了,类似于程序语句,只能使用在HTML文件里,而不能在CSS文件中使用,并且只有在IE浏览器下才能执行,这个代码在非IE浏览下非单不是执行该条件下的定义,而是当做注释视而不见。
<!– 默认先调用css.css样式表 –><link rel="stylesheet" type="text/css" href="css.css" /><!–[if IE 7]><!– 如果IE浏览器版是7,调用ie7.css样式表 –><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]–><!–[if lte IE 6]><!– 如果IE浏览器版本小于等于6,调用ie.css样式表 –><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]–>
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! :就是不等于的意思,跟javascript里的不等于判断符相同。
书写顺序
看看,看看,这么多姿势,那么一个效果,好多种写法,什么顺序写才能保证各个浏览器都得到希望的效果呢?因为CSS只要是同一级别,出现重复属性设置,后出现的会覆盖前面出现的,所以在书写的时候一般把识别能力强的写前面,看个例子
_background-color:red;background-color:green;
如果希望DIV在IE6上是红色,其它是绿色,上面的写法可不可以呢?试一下发现所有浏览器上都是绿色,因为在IE6解析的时候,第一句能够识别,背景设为红色,但是第二句所有浏览器都识别,IE6也不例外,背景颜色又被设为绿色,所以得反过来写
background-color:green;_background-color:red;
总结出的规律就是:先一般,再特殊。有兴趣的同学可以试试试试下面CSS,看看和你想的效果是否一样
background-color:blue; /*所有浏览器*/background-color:red\9;/*所有的ie*/background-color:yellow\0; /* ie8+*/+background-color:pink; /*+ ie7*/
转载自:点击打开链接
- css的hack详解
- css hack 大全详解
- CSS hack 详解
- 【详解】CSS hack大全
- css hack 详解
- 详解css hack
- CSS Holly Hack原理详解
- CSS hack大全&详解(什么是CSS hack)
- CSS HACK收集:在IE6下hack的方法详解
- CSS Hack
- CSS Hack
- CSS hack
- css hack
- css hack
- CSS hack
- css hack
- css hack
- Css Hack
- 经典SQL练习题
- 微信号开通检测软件选择需谨慎
- ffmpeg混音以及音视频混合
- 组合数学第三次作业
- PL/SQL和sql是什么区别?
- CSS hack 详解
- 使用Maven+Nexus+Jenkins+Svn+Tomcat+Sonar搭建持续集成环境(二)
- ListView等的样式和内容适配器不复用问题
- 牛客网刷题之删除链表中重复的结点
- 关于Android ActionBar上不显示icon的问题
- 将附初值的的变量定位到ROM中
- Gradle 介绍三
- 【水仙花数】Python求解水仙花数
- 怎样学习哲学