css hack原理
近期看了几篇关于css hack的文章,认为不错整理一下。
css hack非常多人不理解它的原理,事实上大家都知道对于不同的浏览器,CSS的解析程度不一样。因此会导致生成的页面效果不一样;特别是对于IE这样的蛇精病的浏览器来说。这个时候我们就须要针对不同的浏览器(特别是IE)去写不同的CSS,这个过程就叫做css hack.而不是那个hack,可以说css hack是一种借助于不同浏览器之间规则标准的不同而实现兼容性的一种“曲线救国”的策略,尽管如此。我们还是希望世界大同。有个统一的标准可以统一浏览器规范 T T
css hack主要根据的是
1.浏览器对CSS的支持及解析结果不一样;
2.CSS中的优先级的关系。
经常使用的CSS hack 有三种方式,CSS 内部hack、选择器hack、HTML 头部引用,当中第一种最经常使用。
A.css 内部hack:
CSS 内部hack 语法是这种 selector{<hack>?property:value<hack>?;} 比方IE6能识别下划线"_"和星号"*",IE7能识别星号"*",但不能识别下划线"_",而firefox两个都不能认识。
对于书写顺序的关系,通常是将识别能力强的浏览器的CSS写在后面。
<style> div{ background:green;/*forfirefox*/ *background:red;/*forIE6 IE7*/ } </style>这种话就成功对IE6,7 做了一次hack;
再比方,“!important”的写法仅仅有IE6不能识别,其他版本号IE及现代浏览器都能够识别
其他版本号IE及现代浏览器都能够识别。还有“+”、“\0”、”\9” 等,这里盗图一张:
IE6 | IE7 | IE8 | IE9 | IE10 | 现代浏览器 | |
* |
![]() |
![]() |
||||
+ |
![]() |
|||||
- |
![]() |
|||||
!important |
![]() |
![]() |
![]() |
![]() |
![]() |
|
\9 |
![]() |
![]() |
![]() |
![]() |
![]() |
|
\0 |
![]() |
![]() |
![]() |
|||
\9\0 |
![]() |
![]() |
|
B.选择器hack
选择器hanck主要是针对IE浏览器,事实上并不怎么经常使用
语法是这种:<hack> selector{ sRules }
再盗图一张:
IE6 | IE7 | IE8 | IE9 | IE10 | 现代浏览器 | |
*html |
![]() |
|||||
*+html |
![]() |
|||||
:root |
![]() |
针对IE9的hack能够这么写
:root .test { background-color:green; }
C.HTML头部引用
HTML头部引用就比較特殊了。类似于程序语句,仅仅能使用在HTML文件中,而不能在CSS文件中使用。而且仅仅有在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]–>注:
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写。也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! :就是不等于的意思,跟javascript里的不等于推断符同样。
关于各种主流浏览器hack的使用方法能够參考这篇文章(目測须要hack的IE比較多):
http://www.w3cplus.com/css/browser-hacks.html
还有专门罗列hack情况的站点: http://browserhacks.com/