史上最全的CSS亚洲城ca88唯一官方网站

时间:2020-02-08 00:38来源:亚洲城ca88唯一官方网站
只在IE下生效!--[if IE]这段文字只在IE浏览器显示![endif]--只在IE6下生效!--[if IE 6]这段文字只在IE6浏览器显示![endif]--只在IE6以上版本生效!--[if gte IE 6]这段文字只在IE6以上(包括)版本IE浏览器
只在IE下生效!--[if IE]这段文字只在IE浏览器显示![endif]--只在IE6下生效!--[if IE 6]这段文字只在IE6浏览器显示![endif]--只在IE6以上版本生效!--[if gte IE 6]这段文字只在IE6以上(包括)版本IE浏览器显示![endif]--只在IE8上不生效!--[if ! IE 8]这段文字在非IE8浏览器显示![endif]--非IE浏览器生效!--[if !IE]这段文字只在非IE浏览器显示![endif]--

CSS hack利弊

常常意况下,大家尽量制止使用CSS hack,但是有个别情形为了照望客户体验达成向下宽容,不得已才使用hack。譬喻由于IE8及以下版本不扶助CSS3,而咱们的花色页面使用了汪洋CSS3新天性在IE9/Firefox/Chrome下平常渲染,这种情景下尽管不使用css3pie或htc或规范注释等措施时,可能就得让IE8-的依赖hack出马了。使用hack纵然对页面展现的黄金时代致性有好处,但过多的滥用会导致html文书档案杂乱无章,增添管理和保证的负担。相信只要大家一齐努力,少用、慎用hack,以后势必会促使浏览器厂商的正规化进一层趋于统大器晚成,顺遂衔接到正规浏览器的主大运代。屏弃那多少个陈旧的IE hack,必定将缓慢解决大家编码的复杂度,少做无用功。

最终补上一张引自国外某大腕总结的CSS hack表,那时候一张6年前的旧文化汇总表了,放在此仅供应和供给要时候方便参照他事他说加以考察。

亚洲城ca88唯一官方网站 1

img

注解:本文测验意况为IE6~IE10,Chrome 29.0.1547.66 m,Firefox 20.0.1 ,Opera 12.02等。

参谋资料 : 史上最全的CSS hack方式一览

demo1是测验差异IE浏览器下hack 的来得效果IE6展现为:深橙,IE7显示为:肉桂色,IE8呈现为:石绿,IE9显示为:鲜绿,Firefox/Chrome/Opera突显为:石青,若去掉个中的!important属性定义,则IE6/7照样是紫酱色,IE8是红棕,IE9/10为石黄,Firefox/Chrome变为玉粉红色,Opera是紫红。是或不是有个别意外:除了IE6以外,其余具有的显现都相符大家的想望。那为什么IE6表现的颜色不是_的土色而是 margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: border-box;" html #ie7test { /IE7 only/ color:green; }

CSS hack分类

CSS Hack大约有3种表现方式,CSS属性前缀法、选用器前缀法甚至IE条件注释法(即HTML尾部援引if IE)Hack,实际项目中CSS Hack抢先二分一是对准IE浏览器差别版本之间的表现行反革命差而引进的。

  • 性情前缀法(即类内部Hack卡塔尔(قطر‎:比如 IE6能识别下划线""和星号" ",IE7能识别星号" * ",但无法鉴定识别下划线"*",IE6~IE10都认识"9",但firefox前述三个都不能够认知。
  • 筛选器前缀法(即选用器Hack卡塔尔:譬喻 IE6能辨识html .class{},IE7能识别 html .class{}或者*:first-child html .class{}。
  • IE条件注释法(即HTML条件注释Hack卡塔尔:针对全数IE(注:IE10 已经不复支持条件注释State of Qatar: ,针对IE6及以下版本: 。那类Hack不独有对CSS生效,对写在认清语句里面的有着代码都会收效。

CSS hack书写顺序,日常是将适用范围广、被识别才干强的CSS定义在前边。

现阶段最广大的是

CSS hack方式二:类内属性前缀法

质量前缀法是在CSS样式属性名前拉长部分独有一定浏览器技能识其他hack前缀,以完成预期的页面表现效果。

IE浏览器各版本 CSS hack 对照表

hack 写法 实例 IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q) IE9(S) IE9(Q) IE10(S) IE10(Q)
* *color 青色 Y Y Y Y N Y N Y N Y
color 绿色 Y Y Y Y N Y N Y N Y
- -color 黄色 Y Y N N N N N N N N
_ _color 蓝色 Y Y N Y N Y N Y N N
# #color 紫色 Y Y Y Y N Y N Y N Y
\0 color:red\0 红色 N N N N Y N Y N Y N
9\0 color:red9\0 粉色 N N N N N N Y N Y N
!important color:blue !important;color:green; 棕色 N N Y N Y N Y N Y Y

评释:在规范情势中

  • “-″减号是IE6专有的hack
  • “9″ IE6/IE7/IE8/IE9/IE10都生效
  • “\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
  • “9\0″ 只对IE9/IE10生效,是IE9/10的hack

demo如下

<script type="text/javascript">  
    //alert(document.compatMode);  
</script>  
<style type="text/css">  
body:nth-of-type(1) .iehack{  
    color: #F00;/* 对Windows IE9/Firefox 7 /Opera 10 /所有Chrome/Safari的CSS hack ,选择器也适用几乎全部Mobile/Linux/Mac browser*/  
}  
.demo1,.demo2,.demo3,.demo4{  
    width:100px;  
    height:100px;  
}  
.hack{  
/*demo1 */  
/*demo1 注意顺序,否则IE6/7下可能无法正确显示,导致结果显示为白色背景*/  
    background-color:red; /* All browsers */  
    background-color:blue !important;/* All browsers but IE6 */  
    *background-color:black; /* IE6, IE7 */  
     background-color:yellow;/* IE6, IE7*/  
    background-color:gray9; /* IE6, IE7, IE8, IE9, IE10 */  
    background-color:purple\0; /* IE8, IE9, IE10 */  
    background-color:orange9\0;/*IE9, IE10*/  
    _background-color:green; /* Only works in IE6 */  
    * background-color:pink; /*  WARNING: Only works in IE7 ? Is it right? */  
}  

/*可以通过javascript检测IE10,然后给IE10的<html>标签加上class=”ie10″ 这个类 */  
.ie10 #hack{  
    color:red; /* Only works in IE10 */  
}  

/*demo2*/  
.iehack{  
/*该demo实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack,注意顺序 
IE6显示为:绿色, 
IE7显示为:黑色, 
IE8显示为:红色, 
IE9显示为:蓝色, 
Firefox/Chrome显示为:橘色, 
(本例IE10效果同IE9,Opera最新版效果同IE8) 
*/  
    background-color:orange;  /* all - for Firefox/Chrome */  
    background-color:red\0;  /* ie 8/9/10/Opera - for ie8/ie10/Opera */  
    background-color:blue9\0;  /* ie 9/10 - for ie9/10 */  
    *background-color:black;  /* ie 6/7 - for ie7 */  
    _background-color:green;  /* ie 6 - for ie6 */  
}  

/*demo3 
实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack,注意顺序 
IE6显示为:红色, 
IE7显示为:蓝色, 
IE8显示为:绿色, 
IE9显示为:粉色, 
Firefox/Chrome显示为:橘色, 
(本例IE10效果同IE9,Opera最新版效果也同IE9为粉色) 

*/  
.element {  
    background-color:orange;    /* all IE/FF/CH/OP*/  
}  
.element {  
    *background-color: blue;    /* IE6 7, doesn't work in IE8/9 as IE7 */  
}  
.element {  
    _background-color: red;     /* IE6 */  
}  
.element {  
    background-color: green\0; /* IE8 9 10  */  
}  
:root .element { background-color:pink\0; }  /* IE9 10 */  

/*demo4*/  
/* 

该实例是用于区分标准模式下ie6~ie10和Opera/Firefox/Chrome的hack,本例特别要注意顺序 
IE6显示为:橘色, 
IE7显示为:粉色, 
IE8显示为:黄色, 
IE9显示为:紫色, 
IE10显示为:绿色, 
Firefox显示为:蓝色, 
Opera显示为:黑色, 
Safari/Chrome显示为:灰色, 

*/  
.hacktest{   
    background-color:blue;      /* 都识别,此处针对firefox */  
    background-color:red9;      /*all ie*/  
    background-color:yellow\0;    /*for IE8/IE9/10 最新版opera也认识*/  
     background-color:pink;        /*for ie6/7*/  
    _background-color:orange;       /*for ie6*/  
}  

@media screen and (min-width:0){   
    .hacktest {background-color:black\0;}  /*opera*/  
}   
@media screen and (min-width:0) {   
    .hacktest { background-color:purple9; }/*  for IE9/IE10  PS:国外有些习惯常写作\0,根本没考虑Opera也认识\0的实际 */  
}  
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {   
   .hacktest { background-color:green; } /* for IE10  此写法可以适配到高对比度和默认模式,故可覆盖所有ie10的模式 */  
}  
@media screen and (-webkit-min-device-pixel-ratio:0){ .hacktest {background-color:gray;} }  /*for Chrome/Safari*/  

/* #963棕色 :root is for IE9/IE10, 优先级高于@media, 慎用!如果二者合用,必要时在@media样式加入 !important 才能区分IE9和IE10 */  
/* 
:root .hacktest { background-color:#9639; }  
*/  
</style>

demo1是测试不相同IE浏览器下hack 的显得效果
IE6显示为:粉色,
IE7显示为:粉色,
IE8显示为:蓝色,
IE9显示为:蓝色,
Firefox/Chrome/Opera显示为:蓝色,
若去掉此中的!important属性定义,则IE6/7照样是紫水晶色,IE8是黑色,IE9/10为血牙红,Firefox/Chrome变为原野绿,Opera是原野绿。是否某个意外:除了IE6以外,其余兼具的显现都相符大家的企盼。那为什么IE6表现的水彩不是_background-color:green;的铁黄而是* background-color:pink的桃色呢?其实是最后一句所谓的IE7私有hack惹的祸?不是说* 是IE7的专有hack吗?错,你大概太马虎了!大家常说的IE7专有* hack的格式是* html selector,并非地点的向来在品质上加* 前缀。假若是为IE7定制特殊体制,应该如此使用:

* html #ie7test { /* IE7 only*/
    color:green;
}

由此测量检验,我意识属性前缀* background-color:pink;只有IE6和IE7认识。而* html selector唯有IE7认知。所以我们在采纳时候一定要特别注意。

demo2实例是用以区分规范方式下ie6~ie9和Firefox/Chrome的hack,注意顺序
IE6显示为:绿色,
IE7显示为:黑色,
IE8显示为:红色,
IE9显示为:蓝色,
Firefox/Chrome显示为:橘色,
(本例IE10意义同IE9,Opera最新版效果同IE8)

demo3实例也是用来区分标准方式下ie6~ie9和Firefox/Chrome的hack,注意顺序
IE6显示为:红色,
IE7显示为:蓝色,
IE8显示为:绿色,
IE9显示为:粉色,
Firefox/Chrome显示为:橘色,
(本例IE10效应同IE9,Opera最新版效果也同IE9为橄榄棕)

demo4实例是用来区分标准情势下ie6~ie10和Opera/Firefox/Chrome的hack,本例非常要留神顺序
IE6显示为:橘色,
IE7显示为:粉色,
IE8显示为:黄色,
IE9显示为:紫色,
IE10显示为:绿色,
Firefox显示为:蓝色,
Opera显示为:黑色,
Safari/Chrome显示为:灰色,

亚洲城ca88唯一官方网站 2

img

诚如景色下,我们尽量制止使用CSS hack,可是有个别情况为了顾及客户体验达成向下包容,不得已才使用hack。举个例子由于IE8及以下版本不扶植CSS3,而作者辈的档期的顺序页面使用了大批量CSS3新个性在IE9/Firefox/Chrome下符合规律渲染,这种意况下风流倜傥旦不应用css3pie或htc或条件注释等艺术时,或然就得让IE8-的专门项目hack出马了。使用hack即便对页面表现的意气风发致性有益处,但过多的滥用会引致html文档杂乱无章,扩展管护的担当。相信借使大家一块使劲,少用、慎用hack,现在早晚上的集会驱使浏览器商家的正统更是趋向统朝气蓬勃,顺遂对接到正式浏览器的主大运代。遗弃那个陈旧的IE hack,必定会将缓和大家编码的复杂度,少做无用功。

CSS hack的原理

是因为差别的浏览器和浏览器各版本对CSS的扶助及分析结果不一致等,以至CSS优先级对浏览器表现效果的熏陶,大家可认为此针对区别的浏览器情景来选取不一样的CSS。

构成CSS3的局地选取器,如html:first-child,body:nth-of-type(1卡塔尔(قطر‎,衍生出越来越多的hack情势

原稿地址:常见的CSS Hack 转发请证明出处

选料器前缀法是本着部分页面展现不等同可能必要特殊对待的浏览器,在CSS采取器前加上有的独有少数特定浏览器手艺识其他前缀举行hack。

CSS hack方式意气风发:条件注释法

这种办法是IE浏览器专有的Hack格局,微软官方推荐使用的hack方式。比方如下

    只在IE下生效
    <!--[if IE]>
    这段文字只在IE浏览器显示
    <![endif]-->

    只在IE6下生效
    <!--[if IE 6]>
    这段文字只在IE6浏览器显示
    <![endif]-->

    只在IE6以上版本生效
    <!--[if gte IE 6]>
    这段文字只在IE6以上(包括)版本IE浏览器显示
    <![endif]-->

    只在IE8上不生效
    <!--[if ! IE 8]>
    这段文字在非IE8浏览器显示
    <![endif]-->

    非IE浏览器生效
    <!--[if !IE]>
    这段文字只在非IE浏览器显示
    <![endif]-->

CSS3接受器结合JavaScript的Hack

CSS3选取器结合JavaScript的Hack

大家用IE10举办比如:

鉴于IE10客商代理字符串(UserAgent)为:Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0State of Qatar,所以大家得以运用JavaScript将此属性增多到文书档案标签中,再利用CSS3基本采取器相配。

JavaScript代码:

var htmlObj = document.documentElement;
htmlObj.setAttribute('data-useragent',navigator.userAgent);
htmlObj.setAttribute('data-platform', navigator.platform );

CSS3相称代码:

html[data-useragent*='MSIE 10.0'] #id {
    color: #F00;
}

CSS3相称代码:

什么是CSS hack

出于不一致商家的流览器或某浏览器的比不上版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、拆解剖析不切合,引致在差异浏览器的境况中呈现出差别样的页面表现效果。那时候,大家为了获得统风华正茂的页面效果,就必要针对差异的浏览器或不一样版本写一定的CSS样式,大家把那么些针对不相同的浏览器/不一致版本写相应的CSS code的进程,叫做CSS hack!

这种方法是IE浏览器专有的哈克格局,微软官方推荐应用的hack方式。举个例子如下

CSS hack格局三:接受器前缀法

选用器前缀法是指向性部分页面表现不等同或然须求新鲜对待的浏览器,在CSS采纳器前加上有的唯有少数特定浏览器技能识别的前缀举办hack。

现阶段最分布的是

*html *前缀只对IE6生效
* html * 前缀只对IE7生效
@media screen9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen,screen9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
等等

结合CSS3的生机勃勃部分选拔器,如html:first-child,body:nth-of-type(1卡塔尔(قطر‎,衍生出越来越多的hack方式,具体的能够参照下表:

亚洲城ca88唯一官方网站 3

img

大家用IE10开展譬喻:

通过测量检验,笔者发觉属性前缀 只有IE6和IE7认识。而 html selector独有IE7认知。所以大家在选取时候自然要极其注意。

什么是CSS hack

CSS hack分类

CSS hack格局二:类内属性前缀法

demo3实例也是用于区分标准方式下ie6~ie9和Firefox/Chrome的hack,注意顺序IE6彰显为:浅橙,IE7展现为:水泥灰,IE8呈现为:冰雪蓝,IE9彰显为:粉红色,Firefox/Chrome展现为:橘色,(本例IE10效益同IE9,Opera最新版效果也同IE9为淡白紫)

demo4实例是用以区分标准方式下ie6~ie10和Opera/Firefox/Chrome的hack,本例特别要静心顺序IE6展现为:橘色,IE7展现为:海蓝,IE8展现为:×××,IE9显示为:草绿,IE10显得为:青黄,Firefox显示为:水暗黄,Opera突显为:赫色,Safari/Chrome展现为:银白,

CSS hack方式生龙活虎:条件注释法

CSS Hack差十分的少有3种表现情势,CSS属性前缀法、选拔器前缀法以至IE条件注释法(即HTML底部援引if IE)Hack,实际项目中CSS Hack当先四分之二是本着IE浏览器分裂版本之间的表现差距而引进的。

由于IE10客商代理字符串(UserAgent)为:Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0State of Qatar,所以大家可以选用javascript将此属性增多到文档标签中,再使用CSS3基本选取器相配。

var htmlObj = document.documentElement;htmlObj.setAttribute(‘data-useragent‘,navigator.userAgent);htmlObj.setAttribute(‘data-platform‘, navigator.platform );

出于分歧厂家的流览器或某浏览器的例外版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、剖判不等同,以致在不一致浏览器的条件中展现出不相同等的页面表现效果。此时,大家为了得到统生机勃勃的页面效果,就要求针对分裂的浏览器或差别版本写一定的CSS样式,我们把那一个针对不一致的浏览器/不一样版本写相应的CSS code的经过,叫做CSS hack!

属性前缀法(即类内部HackState of Qatar:比如IE6能识别下划线""和星号"",IE7能识别星号"",但无法识别下划线"",IE6~IE10都认识"9",但firefox前述多个都不可能认知。选用器前缀法(即选取器Hack卡塔尔:举个例子IE6能分辨html .class{},IE7能识别 html .class{}或者*:first-child html .class{}。IE条件注释法(即HTML条件注释HackState of Qatar:针对具有IE(注:IE10 已经不复帮衬标准化注释卡塔尔国: !--[if IE]IE浏览器突显的开始和结果 ![endif]--,针对IE6及以下版本: !--[if lt IE 6]只在IE6-展现的情节 ![endif]--。那类哈克不仅仅对CSS生效,对写在认清语句里面的装有代码都会一蹴而就。

证实:本文测量检验境况为IE6~IE10,Chrome 29.0.1547.66 m,Firefox 20.0.1 ,Opera 12.02等

鉴于区别的浏览器和浏览器各版本对CSS的支持及剖判结果区别样,以至CSS优先级对浏览器表现效果的熏陶,大家能够就此针对不一致的浏览器情景来利用分化的CSS。

demo2实例是用于区分标准形式下ie6~ie9和Firefox/Chrome的hack,注意顺序IE6展现为:铁黄,IE7展现为:灰褐,IE8突显为:黑灰,IE9呈现为:雪白,Firefox/Chrome展现为:橘色,(本例IE10效果与利益同IE9,Opera最新版效果同IE8)

html[data-useragent*=‘MSIE 10.0‘] #id { color: #F00;}

CSS hack方式三:选拔器前缀法

做前端多年,即使不是陆陆续续索要hack,但是大家平时会蒙受各浏览器表现不相近的境况。基于此,某个情形大家会极不情愿的施用这几个不太和煦的方法来达成我们要求的页面表现。小编个人是不太推荐使用hack的,要驾驭一名好的前端,要硬着头皮不采用hack的景观下达成要求,做到较好的客商体验。

时间: 2018-07-28阅读: 97标签: 兼容

CSS hack书写顺序,平时是将适用范围广、被识别手艺强的CSS定义在日前。

*html *前缀只对IE6生效* html * 前缀只对IE7生效@media screen9{...}只对IE6/7生效@media \0screen {body { background: red; }}只对IE8有效@media \0screen,screen9{body { background: blue; }}只对IE6/7/8有效@media screen\0 {body { background: green; }} 只对IE8/9/10有效@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

JavaScript代码:

属性前缀法是在CSS样式属性名前加多一些独有一定浏览器技能识别的hack前缀,以达到预期的页面表现效果。

CSS hack的原理

CSS hack利弊

只是啊,现实太狠心,浏览器商家之间历史遗留的主题素材让我们在目的要求下必须要向hack退让,纵然那只是个别境况。今日,结合自个儿的经历和清楚,做了多少个demo把IE6~IE10和别的职业浏览器的CSS hack做八个计算,也许本文应该是日前最完善的hack总计了啊。

script type="text/javascript" //alert(document.compatMode);/scriptstyle type="text/css"body:nth-of-type(1) .iehack{ color: #F00;/* 对Windows IE9/Firefox 7 /Opera 10 /所有Chrome/Safari的CSS hack ,选择器也适用几乎全部Mobile/Linux/Mac browser*/}.demo1,.demo2,.demo3,.demo4{ width:100px; height:100px;}.hack{/*demo1 *//*demo1 注意顺序,否则IE6/7下可能无法正确显示,导致结果显示为白色背景*/ background-color:red; /* All browsers */ background-color:blue !important;/* All browsers but IE6 */ *background-color:black; /* IE6, IE7 */  background-color:yellow;/* IE6, IE7*/ background-color:gray9; /* IE6, IE7, IE8, IE9, IE10 */ background-color:purple\0; /* IE8, IE9, IE10 */ background-color:orange9\0;/*IE9, IE10*/ _background-color:green; /* Only works in IE6 */ * background-color:pink; /* WARNING: Only works in IE7 ? Is it right? */}/*可以通过javascript检测IE10,然后给IE10的html标签加上class=”ie10″ 这个类 */.ie10 #hack{ color:red; /* Only works in IE10 */}/*demo2*/.iehack{/*该demo实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack,注意顺序IE6显示为:绿色,IE7显示为:黑色,IE8显示为:红色,IE9显示为:蓝色,Firefox/Chrome显示为:橘色,(本例IE10效果同IE9,Opera最新版效果同IE8)*/ background-color:orange; /* all - for Firefox/Chrome */ background-color:red\0; /* ie 8/9/10/Opera - for ie8/ie10/Opera */ background-color:blue9\0; /* ie 9/10 - for ie9/10 */ *background-color:black; /* ie 6/7 - for ie7 */ _background-color:green; /* ie 6 - for ie6 */}/*demo3实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack,注意顺序IE6显示为:红色,IE7显示为:蓝色,IE8显示为:绿色,IE9显示为:粉色,Firefox/Chrome显示为:橘色,(本例IE10效果同IE9,Opera最新版效果也同IE9为粉色)*/.element { background-color:orange; /* all IE/FF/CH/OP*/}.element { *background-color: blue; /* IE6 7, doesn‘t work in IE8/9 as IE7 */}.element { _background-color: red; /* IE6 */}.element { background-color: green\0; /* IE8 9 10 */}:root .element { background-color:pink\0; } /* IE9 10 *//*demo4*//*该实例是用于区分标准模式下ie6~ie10和Opera/Firefox/Chrome的hack,本例特别要注意顺序IE6显示为:橘色,IE7显示为:粉色,IE8显示为:×××,IE9显示为:紫色,IE10显示为:绿色,Firefox显示为:蓝色,Opera显示为:黑色,Safari/Chrome显示为:灰色,*/.hacktest{ background-color:blue; /* 都识别,此处针对firefox */ background-color:red9; /*all ie*/ background-color:yellow\0; /*for IE8/IE9/10 最新版opera也认识*/  background-color:pink; /*for ie6/7*/ _background-color:orange; /*for ie6*/}@media screen and (min-width:0){ .hacktest {background-color:black\0;} /*opera*/} @media screen and (min-width:0) { .hacktest { background-color:purple9; }/* for IE9/IE10 PS:国外有些习惯常写作\0,根本没考虑Opera也认识\0的实际 */}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .hacktest { background-color:green; } /* for IE10  此写法可以适配到高对比度和默认模式,故可覆盖所有ie10的模式 */}@media screen and (-webkit-min-device-pixel-ratio:0){ .hacktest {background-color:gray;} } /*for Chrome/Safari*//* #963棕色 :root is for IE9/IE10, 优先级高于@media, 慎用!如果二者合用,必要时在@media样式加入 !important 才能区分IE9和IE10 *//*:root .hacktest { background-color:#9639; } *//style

编辑:亚洲城ca88唯一官方网站 本文来源:史上最全的CSS亚洲城ca88唯一官方网站

关键词: 亚洲城ca88