各浏览器的Hack写法【转】

时间 2019-11-22

原文原文链接

Hack是针对不一样的浏览器去写不一样的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不一样的浏览器写不一样的CSS CODE的过程，就叫CSS HACK，同时也叫写CSS Hack。而后将Hack放在浏览器特定的CSS文件中，让其符合条件的浏览器解析这些代码，就如前面所说的条件样式，咱们将CSS Hack代码放入条件样式文件中，符合条件的浏览器就解析，不符合的将不解析，从面达到您所须要的页面渲染效果。总的一句话来讲使用CSS Hack将会使用你的CSS代码部分失去做用，而后借助条件样式，使用其原CSS代码在一些浏览器解析，而CSS Hack代码在符合条件要求的浏览器中替代原CSS那部分代码。常见的就是在IE6下使用，不具体说，我想你们都有碰到过了。下面咱们就一块儿来看看全部浏览器都具备什么Hack，换句话说，各类浏览器都能识别哪些CSS的写法。css

下面是我收集有关于各浏览器下Hack的写法html

一、Firefox前端

			@-moz-document url-prefix() {
			  .selector {
			     property: value;
			  }
			}

上面是仅仅被Firefox浏览器识别的写法，具体如：web

			@-moz-document url-prefix() {
			  .demo {
			     color:lime;
			  }
			}

支持Firefox的还有几种写法：chrome

			/* 支持全部firefox版本 */
			#selector[id=selector] { property: value; }
			或者：
			@-moz-document url-prefix() { .selector { property: value; } } 

			/* 支持全部Gecko内核的浏览器 (包括Firefox) */
			*>.selector { property: value; }

二、Webkit枘核浏览器(chrome and safari)浏览器

			@media screen and (-webkit-min-device-pixel-ratio:0)	{
				Selector { property: value; }
			}

上面写法主要是针对Webkit内核的浏览器，如Google Chrome 和 Safari浏览器：url

			@media screen and (-webkit-min-device-pixel-ratio:0)	{
				.demo { color: #f36; }
			}

三、Opera浏览器spa

			html:first-child>b\ody Selector {property:value;}
			或者：
			@media all and (min-width:0) {
				Selector {property: value;}
			}
			或者：
			@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)	{
				head~body  Selector { property: value; }
			}

上面则是Opera浏览器的Hack写法：firefox

			@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)	{
				head~body  .demo { background: green; }
			}

四、IE9浏览器orm

			:root Selector {property: value\9;}

上面是IE9的写法，具体应用以下：

			:root .demo {color: #ff0\9;}

五、IE9以及IE9如下版本

			Selector {property:value\9;}

这种写法只有IE9以及IE9如下版本能识别，这里须要注意此处“\9”只能是“\9”不能是别的，好比说“\8”，否则会失去效果的，如：

			.demo {background: lime\9;}

六、IE8浏览器

				Selector {property: value/;}
				或者：
				@media \0screen{
					Selector {property: value;}
				}

上面写法只有IE能识别，如：

			.color {color: #fff/;}
			或者：
			@media \0screen{
				.color {color: #fff;}
			}

七、IE8以及IE8以上的版本

			Selector {property: value\0;}

这种写法只有IE8以及IE8以上版本支持，如

			.demo {color: #ff0\0;}

八、IE7浏览器

			*+html Selector{property:value;}
			或
			*:first-child+html Selector {property:value;}

上面两种是IE7浏览器下才能识别，如：

			*+html .demo {background: green;}
			或者：
			*:first-child+html .demo {background: green;}

九、IE7及IE7如下版本浏览器

			Selector {*property: value;}

上面的写法在IE7以及其如下版本均可以识别，如：

			.demo {*background: red;}

十、IE6浏览器

			Selector {_property/**/:/**/value;}
			或者：
			Selector {_property: value;}
			或者：
			*html Selector {property: value;}

具体应用以下：

			.demo {_width/**/:/**/100px;}
			或者：
			.demo {_width: 100px;}
			或者：
			*html .demo {width: 100px;}

上面具体介绍了各类版本浏览器下如何识别各类的Hack写法，包括了IE6-9以及现代版本的浏览器写法。综合上面的所述，咱们针对不一样浏览器的Hack写法主要分为两种从CSS选择器和CSS属性上来区别不一样的Hack写法。下面咱们分别来看这两种的不一样写法：

CSS选择器的Hack写法

下面咱们主要来看CSS选择器和CSS属性选择器在不一样浏览器的支持状况。下面先来看CSS选择器支持状况。

CSS选择器的Hack写法

一、IE6以及IE6如下版本浏览器

			* html .demo {color: green;}

二、仅仅IE7浏览器

			*:first-child+html .demo {color: green;}

三、除IE6以外的全部浏览器（IE7-9, Firefox,Safari,Opera）

			html>body .demo {color: green;}

四、IE8-9,Firefox,Safari,Opear

			html>/**/body .demo {color: green;}

五、IE9+

			:root .demo {color: red;}

六、Firefox浏览器

			@-moz-document url-prefix() {
			  .demo {
			     color: red;
			  }
			}

六、Webkit内核浏览器（Safari和Google Chrome）

			@media screen and (-webkit-min-device-pixel-ratio:0)	{
				.demo { color: red; }
			}

七、Opera浏览器

			@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)	{
				head~body  .demo { color: red; }
			}

八、iPhone / mobile webkit

			@media screen and (max-device-width: 480px) {
				.demo { color: red  }
			}

CSS属性Hack写法

一、IE6浏览器

			.demo {_color: red;}

二、IE6-7浏览器识别

			.demo {*color: red;}

三、全部浏览器除IE6浏览外

			.demo {color/**/:red;}

四、IE6-9浏览器

			.demo {color: red\9;}

五、IE7-8浏览器

			.demo {color/*\**/:red\9;}

上面罗列的都是各类浏览器下的有关于CSS的Hack的写法，基中有针对于现代浏览器Safari,Google Chrome和Firefox的写法，并且也有针对于咱们前端人员最讨厌的IE6-9的各版本浏览器的Hack的写法，并且这些Hack咱们又分为CSS选择器的Hack写法和CSS属性的Hack写法。然而具体何种适用，你们能够要据本身的需求来定，下面列出我我的的两种写法：

1、经济实惠型定法：

这种写法注重单独的CSS的Hack写法。不一样的浏览器使用不一样的Hack写法，其实也只是以IE的Hack写法比较多（由于咱们写Hack也主要是针对IE的浏览器）特别是IE6下的浏览器。单独为各类浏览器写Hack的好处是：针对各类浏览顺的Hack写法省力易记。由于其余的浏览器主要是针对现代浏览器，相对来讲是比较少的。针对于这种Hack的使用，我推荐使用下面的方法：

			.demo {
				color: red;/*全部现代浏览器*/
				color: green\9;/*全部IE浏览器*/
				color: lime\0;/*IE8-9浏览器*/
				*color: red;/*IE6-7浏览器*/
				+color: blue;/*IE7浏览器*/
				_color: orange;/*IE6浏览器*/
			}
			@media all and (min-width:0px){
				color: #000;/*Webkit和Opera浏览器*/
			}
			@media screen and (-webkit-min-device-pixel-ratio:0) {
				color: #f36;/*Webkit内核浏览器*/
			}
			@media all and (-wekit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 
				head~body .demo {color: #369;} /*Opera*/
			}
			@-moz-document url-prefix(){ 
				.demo{color:#ccc;}/* all firefox */
			}

2、完美主义写法

这种方法是追求完美主义的写法，主要是配合咱们上一节所说的IE条件注释，所有采用选择器Hack的写法。这种写法分两步：

一、建立条件样式表，并在HTML中body里添加相应的class类名：

			<!--[if IE6]--><body class="ie6"><<![endif]-->
			<!--[if IE7]--><body class="ie7"><![endif]-->
			<!--[if IE8]--><body class="ie8"><![endif]-->
			<!--[if IE9]--><body class="ie9"><![endif]-->
			<!--[if !IE]--><body class="non-ie"><![endif]-->

二、接着建立对应的样式

			.demo {color: blue;}/*现代浏览器*/
			.non-ie .demo {color: red;}/*除IE外浏览器*/
			.ie9 .demo {color: yellow;}/*IE9浏览器*/
			.ie8 .demo{color: green;}/*IE8浏览器*/
			.ie7 .demo {color: orange;}/*IE7浏览器*/
			.ie6 .demo {color: lime;}/*IE6浏览器*/
			@media all and (min-width: 0px){ 
				.demo {color:black;} /* webkit and opera */
			}
			@media screen and (-webkit-min-device-pixel-ratio:0){ 
				.demo{color:#369;}/* webkit */
			}
			@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 
				head~body .demo{color:#cf6;}/* opera */
			}
			@-moz-document url-prefix(){ 
				.demo{color:#963;}/* firefox * /
			}

上面就是目前各类浏览器下，相关CSS的Hack的写法，下面咱们具体来看一个实例：

HTML Markup

			<div class="demo">test color</div>

CSS Code

			.demo {
				color: red;/*全部现代浏览器*/
				color: green\9;/*全部IE浏览器*/
				color: lime\0;/*IE8-9浏览器*/
				*color: red;/*IE6-7浏览器*/
				+color: blue;/*IE7浏览器*/
				_color: orange;/*IE6浏览器*/
			}
			:root .demo {color: #963\9;}
			@-moz-document url-prefix(){ 
				.demo{color:#897;}/* all firefox */
			} 
			@media screen and (-webkit-min-device-pixel-ratio:0)	{
				.demo { color: #000; }/*webkit*/
			}
			@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)	{
				head~body  .demo { color: red; }/*opera*/
			}

请看最终效果图：

请面罗列了各浏览器下的Hack的写法，你们写浏览的CSS Hack时也能够参考下面的图表

注：上图要是看不清楚，能够点击鼠标右键，将图片保存到本地后浏览，效果会更佳。上图也能够前往centricle.com在线查看。

那么到此就介绍完了有关于各浏览器的CSS Hack的写法，你们在平时须要使用Hack时能够根据CSS的选择器Hack和CSS的属性Hack对号入坐，不过我仍是强调在Web页面制做中尽可能不要使用CSS Hack来处理兼容问题。由于任何浏览器下出现渲染不一致都极有多是咱们本身的结构或样式不符合W3C的某些要求，或者说违背了浏览器的某些规则而先形成的，因此咱们应该尽可能经过结构或CSS的修改来达到各浏览器渲染一致效果，除非到了万不得已状况下，才考虑CSS的Hack。