CSS兼容之特殊符号的应用大全

因为各大涉猎器十分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; }