浅谈兼容各种浏览器下的CSS Hack写法

因为不一样电脑浏览器所遵循的规范也各有不同，再再加上必然的程序流程bug，经济发展权益等要素的影响。一样的网页源代码(HTML CSS)，在不一样游览器上的展示实际效果却略有不同，乃至有很大的不一样。即便 是同一个电脑浏览器，其不一样版本号的展示实际效果也各有不同，尤其是IE。这就给网页页面网站前端开发工作人员介绍了非常大的困惑。开发者务必兼具充分考虑全部主要的电脑浏览器，才可以在不一样的电脑浏览器上表明出同样或满足要求的实际效果。因此CSS Hack技术性就兴起了。 CSS Hack技术性，便是使用不一样电脑浏览器不一样版本号之前的CSS完成的特点差别，来达到大家必须的实际效果：在全部主流浏览器上表明统一的实际效果，或是为特殊电脑浏览器表明特殊的实际效果。 大家都知道，假如在一个css样式选择符中出现2个名字同样的特性，电脑浏览器一般会以最终面的特性为标准。 CSS Code拷贝內容到剪贴板

1. <style type="text/css">   
2. .css-hack {   
3.     background-color: red;   
4.     background-color: blue; /* 最后背景颜色表明为深蓝色 */  
5. }   
6. </style>   
7. <div class="css-hack">CodePlayer</div>  

自然，这儿有一个前提条件，那便是电脑浏览器最先得可以鉴别并适用该css属性，针对电脑浏览器不兼容的css属性或值，电脑浏览器将一律将其忽视。 这就是CSS Hack技术性的运用基本原理。比如：即便 我们在特性名字前边还有一个下横线_，IE 6 仍然能够 鉴别该特性，并且仅有IE 6能够 鉴别。因而，大家就可以运用这一特点，让IE 6完成一些指定的实际效果。 CSS Code拷贝內容到剪贴板

1. .css-hack {   
2.     background-color: red; /* 在别的电脑浏览器上表明为鲜红色 */  
3.     _background-color: blue; /* 在IE 6上表明为深蓝色 */  
4. }  

其次如，因为IE 6不兼容max-width特性，可是IE6的css属性值适用expression关系式。因而，我们可以为IE 6 最合适的完成max-width的特性实际效果。 CSS Code拷贝內容到剪贴板

1. .css-hack {   
2.     background-color: red;   
3.     max-width: 200px;   
4.     _width: expression( function(me){ var maxWidth = 200; me.style.width = (me.offsetWidth <= maxWidth ? me.offsetWidth : maxWidth)   "px"; }(this) ); /* _开始仅有IE6能够 鉴别，出自于特性考虑到，这里的关系式只能实行一次 */  
5. }  

下边，大家就来讨论IE 6-11.FireFox.Chrome.Safari.Opera等电脑浏览器的CSS Hack技术性，以供特殊电脑浏览器开展特殊特性的鉴别(国产浏览器一般都应用IE或Chromium核心，因而不予考虑)。 备注名称：以下几点多收集于互联网(在互联网上收集的情况下发觉，在网上胡说八道的很多……)，并实施了亲自检测，以尽可能保证准确，但因为各种各样系统软件服务平台.语言表达自然环境.大版本号.小版本号等难题，小编并无法确定沒有一切忽略或不正确。如果有阅读者发觉，烦请留言板留言告之。
IE网页的CSS Hack 全部的IE网页的CSS Hack 因为全部的IE电脑浏览器都可以鉴别特殊的css属性值后缀名9，因而我们可以给css的特性值加上9后缀名(在末尾的分号以前)，进而保证仅有IE电脑浏览器可以鉴别该特性，别的电脑浏览器无法识别进而将其忽视掉。 CSS Code拷贝內容到剪贴板

1. .css-hack {   
2.     background-color: red; /* 别的电脑浏览器上表明为鲜红色 */  
3.     background-color: blue 9; /* 全部IE电脑浏览器上表明为深蓝色 */  
4. }  

IE 6的CSS Hack 不容置疑，如上所述，为css的特性前边加下横线_，这也是给IE6专用型的。 CSS Code拷贝內容到剪贴板

1. .css-hack {   
2.     background-color: red; /* 别的电脑浏览器上表明为鲜红色 */  
3.     _background-color: blue; /* 仅有IE 6电脑浏览器上表明为深蓝色 */  
4. }  

IE 7的CSS Hack IE6.IE7都可以鉴别加了 .*或#作为前缀的css属性名字，可是IE 7不兼容_作为前缀，而IE6适用。因而，我们可以先写一个*特性. 特性或#特性让IE6.IE7都能鉴别，再写一个_特性，只让IE6鉴别，将特性值还原回来，进而让前面一种只对IE 7起效。 CSS Code拷贝內容到剪贴板

1. .css-hack {   
2.     color: red; /* 别的电脑浏览器上表明为鲜红色 */  
3.      color: blue; /* 仅有 IE 6.IE 7 电脑浏览器上表明为深蓝色 */  
4.     _color: red; /* 让 IE 6 还原为以前安装的色调 */  
5. }  

留意：有一些网页页面上说，仅用 .*或是#号的特性作为前缀就可以只让IE 7开展独立鉴别。但是通过自己亲自测试，无论是用IE Tester，或是专业下载一个XP系统软件，用正版IE 6检测，都说明：IE6.IE7都能够鉴别 .*或#号的特性作为前缀。
此外，也有人说，IE 7适用!important，IE 6不兼容!important，因而能够 根据*特性: 值!important;的方式来完成IE 7的CSS Hack。 事实上，那样也是不可以的，由于IE 6并不是不兼容!important，仅仅有一个bug罢了，敬请参照IE6到底支不兼容!important和IE6 IE7(Q) IE8(Q) 不彻底适用!important标准。 应用!important来完成IE 7的CSS Hack，务必是在同一个款式选择符中，并且一样必须在后面加_特性来还原IE 6的设定(这类方法还不便点，上边的方式 还少写个!important)。 CSS Code拷贝內容到剪贴板

1. .css-hack {   
2.     color: red; /* 别的电脑浏览器上表明为鲜红色 */  
3.     *color: blue !important; /* 仅有 IE 6.IE 7 电脑浏览器上表明为深蓝色 */  
4.     _color: red; /* 让 IE 6 还原为以前安装的色调 */  
5. }  

除此之外，IE 7也适用在选择符前加上* html ，让当今选择符变成 * html的晚辈选择符，仅有IE 7能够 鉴别该类款式选择符(听说一些旧版的Opera电脑浏览器也可以鉴别，但是这种版本号早就作古了，不用考虑到)。 CSS Code拷贝內容到剪贴板

1. .css-hack {   
2.     color: red; /* 别的电脑浏览器表明鲜红色 */  
3. }   
4. * html .css-hack {   
5.     color: blue; /* 仅有IE 7表明深蓝色  */  
6. }  

IE 7还适用在选择符前加上*:first-child html，让当今选择符变成 *:first-child html的晚辈选择符。 IE 8的CSS Hack 仅有IE8适用嵌入如下所示@media类型查看句子：@media screen。 CSS Code拷贝內容到剪贴板

1. .css-hack {   
2.     color: red; /* 别的电脑浏览器表明鲜红色 */  
3. }   
4.   
5. @media screen {   
6.     .css-hack { color: blue; } /* 仅有IE 8表明深蓝色 */  
7. }  

IE 9的CSS Hack 没找到一个可靠的。 IE 10的CSS Hack 没找到一个可靠的。 IE 11的CSS Hack 没找到一个可靠的。 IE 6 IE 7 的CSS Hack 如上所述，仅有IE 6.IE 7能够 鉴别加了 或*号的特性作为前缀。 CSS Code拷贝內容到剪贴板

1. .css-hack {   
2.     color: red; /* 别的电脑浏览器表明鲜红色 */  
3.     *color: blue; /* IE 6.IE 7表明为深蓝色 */  
4. }  

FireFox.Chrome.Safari.Opera的CSS Hack FireFox的CSS Hack FireFox适用嵌入其专用型的css句子：@-moz-document url-prefix()。 CSS Code拷贝內容到剪贴板

1. .css-hack {   
2.     color: red; /* 别的电脑浏览器表明鲜红色 */  
3. }   
4.   
5. @-moz-document url-prefix() {   
6.     .css-hack {   
7.         color: blue; /* 仅有FireFox表明为深蓝色 */  
8.     }   
9. }  

Chrome.Safari等Webkit核心的电脑浏览器的CSS Hack Chrome.Safari等选用webkit核心的电脑浏览器适用新闻媒体种类查看句子：@media screen and (-webkit-min-device-pixel-ratio:0)。 CSS Code拷贝內容到剪贴板

1. .css-hack {   
2.     color: red; /* 别的电脑浏览器表明鲜红色 */  
3. }   
4.   
5. @media screen and (-webkit-min-device-pixel-ratio:0) {    
6.     .css-hack {   
7.         color: blue; /* Webkit核心电脑浏览器表明深蓝色 */  
8.     }   
9. }  

谨慎使用的CSS Hack 在网上很多与CSS Hack有关的文章内容上说，在css的特性值和分号中间加上标识符，能够 完成对IE 8或 IE 9的CSS hack(有的说，仅适用IE8)。 在网上的实例是如此的： CSS Code拷贝內容到剪贴板

1. .css-hack {   
2.     color: red; /* 别的电脑浏览器表明鲜红色 */  
3.     color: blue; /* IE8.IE9 表明深蓝色 */  
4.      color: green; /* IE7 表明翠绿色 */  
5.     _color: brown; /* IE6 表明深棕色 */  
6. }  

根据具体测量发觉，有关应用标识符完成的以上CSS Hack有四点必须留意。 1.IE10也可以鉴别加上了标识符的css属性值(小编这儿沒有IE 11，不清楚IE 11是不是也可以鉴别)。 2.特性值和中间不可以有空格符，有一个空格符得话(比如：blue )，在IE 8中就无效了，仅对IE 9/IE 10合理。 3.如果我们只想要对IE 8/IE 9开展CSS Hack呢？这个时候，大家除掉后边二行与IE6.IE7相关的编码。 CSS Code拷贝內容到剪贴板

1. .css-hack {   
2.     color: red; /* 别的电脑浏览器表明鲜红色 */  
3.     color: blue; /* IE8.IE9 表明深蓝色 */  
4. }  

这个时候，在IE 6.IE 7电脑浏览器中，你能看到你见到的并不是鲜红色，反而是灰黑色(也就是默认设置的字体样式)！ 这是由于一般电脑浏览器的构思是，先过虑掉失效的css属性值，随后再从恰当的特性设定中依据优先获得最终面的css属性值。而IE 6/7电脑浏览器并不是先过虑掉失效的特性值，反而是先依据优先，获得最终面的css属性值，随后再去分辨该特性值是不是，失效就忽视掉。因而，假如依照在网上常说，只是应用来完成IE 8 的CSS Hack，则会对IE6/7中的展示实际效果导致毁坏。你务必根据附加的css属性设定来还原IE6/7的款式。 由于，大家不能够简易地底结果说，应用能够 完成对IE 8.IE 9乃至IE 10 的CSS Hack。

标签：兼容浏览器