`

各浏览器的HACK写法(转载)

阅读更多

各浏览器的HACK写法

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

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

1、Firefox

@-moz-document url-prefix() { .selector { property: value; } }
上面是仅仅被Firefox浏览器识别的写法,具体如:

@-moz-document url-prefix() { .demo { color:lime; } }
支持Firefox的还有几种写法:

/* 支持所有firefox版本 */ #selector[id=selector] { property: value; } 或者: @-moz-document url-prefix() { .selector { property: value; } } /* 支持所有Gecko内核的浏览器 (包括Firefox) */ *>.selector { property: value; }
2、Webkit枘核浏览器(chrome and safari)

@media screen and (-webkit-min-device-pixel-ratio:0) { Selector { property: value; } }
上面写法主要是针对Webkit内核的浏览器,如Google Chrome 和 Safari浏览器:

@media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: #f36; } }
3、Opera浏览器

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写法:

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

:root Selector {property: value\9;}
上面是IE9的写法,具体应用如下:

:root .demo {color: #ff0\9;}
5、IE9以及IE9以下版本

Selector {property:value\9;}
这种写法只有IE9以及IE9以下版本能识别,这里需要注意此处“\9”只能是“\9”不能是别的,比如说“\8”,不然会失去效果的,如:

.demo {background: lime\9;}
6、IE8浏览器

Selector {property: value/;} 或者: @media \0screen{ Selector {property: value;} }
上面写法只有IE能识别,如:

.color {color: #fff/;} 或者: @media \0screen{ .color {color: #fff;} }
7、IE8以及IE8以上的版本

Selector {property: value\0;}
这种写法只有IE8以及IE8以上版本支持,如

.demo {color: #ff0\0;}
8、IE7浏览器

*+html Selector{property:value;} 或 *:first-child+html Selector {property:value;}
上面两种是IE7浏览器下才能识别,如:

*+html .demo {background: green;} 或者: *:first-child+html .demo {background: green;}
9、IE7及IE7以下版本浏览器

Selector {*property: value;}
上面的写法在IE7以及其以下版本都可以识别,如:

.demo {*background: red;}
10、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写法

1、IE6以及IE6以下版本浏览器

* html .demo {color: green;}
2、仅仅IE7浏览器

*:first-child+html .demo {color: green;}
3、除IE6之外的所有浏览器(IE7-9, Firefox,Safari,Opera)

html>body .demo {color: green;}
4、IE8-9,Firefox,Safari,Opear

html>/**/body .demo {color: green;}
5、IE9+

:root .demo {color: red;}
6、Firefox浏览器

@-moz-document url-prefix() { .demo { color: red; } }
6、Webkit内核浏览器(Safari和Google Chrome)

@media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: red; } }
7、Opera浏览器

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

@media screen and (max-device-width: 480px) { .demo { color: red } }
CSS属性Hack写法
1、IE6浏览器

.demo {_color: red;}
2、IE6-7浏览器识别

.demo {*color: red;}
3、所有浏览器除IE6浏览外

.demo {color/**/:red;}
4、IE6-9浏览器

.demo {color: red\9;}
5、IE7-8浏览器

.demo {color/*\**/:red\9;}
上面罗列的都是各种浏览器下的有关于CSS的Hack的写法,基中有针对于现代浏览器Safari,Google Chrome和Firefox的写法,而且也有针对于我们前端人员最讨厌的IE6-9的各版本浏览器的Hack的写法,而且这些Hack我们又分为CSS选择器的Hack写法和CSS属性的Hack写法。然而具体何种适用,大家可以要据自己的需求来定,下面列出我个人的两种写法:

一、经济实惠型定法:
这种写法注重单独的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 */ }
二、完美主义写法
这种方法是追求完美主义的写法,主要是配合我们上一节所说的IE条件注释,全部采用选择器Hack的写法。这种写法分两步:

1、创建条件样式表,并在HTML中body里添加相应的class类名:

<!–[if IE6]–><<!–[if IE7]–><!–[if IE8]–><!–[if IE9]–><!–[if !IE]–>
2、接着创建对应的样式

.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

test color

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时也可以参考下面的图表

分享到:
评论

相关推荐

    各浏览器下Hack的写法

    以下是针对各主流浏览器的一些CSS Hack写法: 1. **Firefox**: 使用`@-moz-document url-prefix()`来为Firefox编写特定的CSS规则。例如: ```css @-moz-document url-prefix() { .selector { property: value...

    浏览器兼容之旅第二站:各浏览器的Hack写法让浏览器达到一致的渲染效果

    从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack这一节将和大家一起学习:浏览器兼容之旅的第二站:各浏览器的Hack写法

    各浏览器CSS hack兼容表

    各浏览器CSS hack兼容表各浏览器CSS hack兼容表

    各浏览器hack

    ### 各浏览器Hack详解 #### 一、引言 在前端开发过程中,由于不同浏览器对CSS的支持程度不一,导致同样的代码在不同的浏览器下显示效果可能会有所差异。为了解决这种兼容性问题,开发者们发明了一种叫做“浏览器...

    CSS Hack 浏览器兼容写法 用法

    CSS Hack 不得不在一些项目中运用到

    css浏览器兼容写法

    本文将详细介绍如何编写针对不同浏览器的CSS兼容写法。 首先,我们可以使用特定的CSS选择器来让特定浏览器识别某些样式。例如,对于IE6,我们使用`*html .head{color:#000;}`,其中星号(*)前缀的选择器只有IE6会...

    各浏览器css兼容写法

    - 当某些特性仅在特定浏览器中可用时,可以使用CSS Hack。例如,`_height`针对IE6,`*zoom`针对IE7,`@media \0`针对IE9及更高版本。 5. **Flexbox与Grid布局**: - Flexbox用于一维布局,如行或列,而Grid布局...

    H5 CSS hack 和浏览器内核

    然而,由于各浏览器对H5新特性的支持程度不一,开发者在实际应用中会遇到兼容性挑战,这正是CSS Hack的用武之地。 CSS Hack主要针对不同的浏览器或者特定版本的浏览器,通过特定的语法结构使得某些CSS规则只在特定...

    各浏览器的cssHack总结

    本文将对各浏览器的CSS Hack进行总结,主要关注如何解决CSS样式兼容问题。 首先,我们了解下主要的浏览器:IE(Internet Explorer)、Firefox、Chrome、Safari以及Opera。它们之间的兼容性问题主要源于对CSS规范的...

    区别不同浏览器CSS hack

    ### 区别不同浏览器CSS Hack知识点详解 #### CSS Hack简介 在Web开发过程中,由于不同浏览器对CSS的支持程度不一,导致同一段CSS代码在不同的浏览器中可能呈现出不同的效果。为了确保网页能在各种浏览器中正常显示...

    各主流浏览器CSS HACK列表

    ### 各主流浏览器CSS HACK列表详解 #### 一、引言 随着Web技术的发展与进步,浏览器兼容性问题一直是前端开发者关注的重点之一。由于不同浏览器对CSS的支持程度有所差异,为了确保网页能够在各种浏览器中正常显示,...

    css safari浏览器识别CSS hack.docx

    在网页设计和开发中,CSS Hack常常用于解决不同浏览器对CSS样式解析的差异问题。本文主要探讨了如何针对Safari浏览器进行CSS Hack,以便在不同的浏览器环境下实现样式的一致性。 首先,我们要明白CSS Hack的基本...

    ie6、ie7、ie8、ie9、ie10、firefox、google chrome浏览器Hack及兼容性演示页面

    浏览器Hack是指通过特定的CSS选择器、属性或JavaScript代码来针对性地解决不同浏览器的兼容问题。例如,对于IE系列,我们可以使用条件注释(Conditional Comments)、私有前缀(如`_property` for IE6,`-ms-` for ...

    常见的浏览器Hack技巧整理

    本文档主要整理了针对IE系列的CSS Hack技巧,并提及了Firefox和Chrome等其他浏览器的特定Hack方式。以下是对文档中所提及知识点的详细梳理: 1. **IE系列浏览器的CSS Hack**: - IE6:可以通过添加一个下划线前缀...

    针对主流浏览器的CSS-HACK写法及IE常用条件注释

    #### 四、浏览器独立支持的HACK写法 不同浏览器有自己的特性,因此可以针对特定浏览器编写特殊的CSS规则: ```css width:100px\0; /* 支持IE8 */ _width:100px; /* 支持IE6 */ [width:100px; /* 支持IE6,7 */ +...

    CSS Hack 浏览器兼容文档

    CSS Hack是一种针对不同浏览器之间解析CSS规则差异的技术,目的是确保CSS样式在各个浏览器中的一致性。在网页设计中,由于各个浏览器(尤其是Internet Explorer的早期版本)对CSS的实现存在差异,导致开发者需要采取...

    关于hack的多种写法以及处理技巧

    Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK。文件是整理所得的技巧,还有如何处理BUG!

Global site tag (gtag.js) - Google Analytics