因为各大涉猎器十分IE涉猎器对web规范支持状况不一,招致尺度的网页在各个浏览器中的浮现不一,于是,规画各浏览器兼容性标题成了前端工程师最需要的任务之一,而所谓的hack妙技则是前端开发中必用的。
CSS hack的写法有不少种,个中,不凡标志的使用最为宽泛,也最为简便,上面逐个先容了不凡标志类型的CSS hack技术:
1、反斜线(\)
合用涉猎器:IE/Mac
反斜线(\)hack操作了IE/Mac的一个马脚。以\*/完结的css 注释在IE/Mac上是不粗略封闭的,以是那些需要在IE/Mac上被忽略的语句可以放在这种表达反面。
- /* CSS评释:在IE Mac上疏忽上面的语句 \*/
- selector { ...styles... }
- /* 忽略竣事 */
2、下划线(_)
合用浏览器:IE6及其如下版本
IE 6 及下列的版本可以识别带有下划线前缀的属性,而其它涉猎器会忽略它。因此,一个属性前面加凹凸划线或许连字符,就成了IE6及如下版本浏览器的专有属性。
- #elem {
- width: [W3C Model Width];
- _width: [BorderBox Model];
- }
PS:这个hack垄断浏览器的bug使用了无效的CSS,因而不举荐使用。
3、星号(*)
适用浏览器:IE7以下版本
除了下划线和连字符,版本7及下列的IE可以辨认以非字母字符为前缀的属性,而其它涉猎器会疏忽。
- #elem {
- width: [W3C Model Width];
- *width: [BorderBox Model];
- }
PS:这个hack把持浏览器的缝隙使用了无效的CSS,因而不推荐使用。
4、星号 HTML(* html)
合用阅读器:IE4-6
HTML元素是W3C尺度DOM的根元素,然则IE 4至6的版本中尚有一个奥密的父元素。彻底兼容的阅读器会疏忽这个* html决意器,但IE4-6却会对它畸形处理。
- * html p {font-size: 5em; }
PS:这个HACK使用了彻底有效的CSS。
5、星号加号(*+)
合用阅读器:IE7
- *:first-child+html p { font-size: 5em; }
概略:
- *+html p { font-size: 5em; }
PS:只在IE7尺度模型里任务正常,在奇特内容下不能用。同时,也被IE8的兼容内容(相当于IE7的尺度形式)所赞成。它也使用了有效的CSS。
6、子决定器(>)
实用阅读器: IE6以上版本及非IE阅读器
IE6与初期的版本不赞成“子抉择器”(>),咱们可以垄断这个为其它涉猎器指定特其它划定规矩。
- html > body p { color: blue; }
7、子决定器加剖明(>/**/)
合用涉猎器: IE7以上版本及非IE阅读器
只管IE7赞成对子决议器,但颠末以下hack门径也可以把IE7也打扫。当一个空的正文紧跟在子决意器的后头重复的时刻,IE7会不识别反面的划定规矩,就和较早版本的涉猎器一样。
- html >/**/ body p { color: blue; }
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css-tool/t52869.shtml