CSS Hack大全-可区分出IE6-IE10、FireFox、Chrome、Opera

今天把一些常用的CSS Hack整理了一下，包括常用的IE hack以及火狐、Chrome、Opera浏览器的Hack，并把这些CSS
Hack综合的一起，写了一个小的浏览器测试器。如图所示：

下面就来看一下代码吧：

html部分：





1

2

3

4

5

6

7

8

9

10

11

12

13

<div
class="content">

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

    <div
class="txt">

        <p>IE6下背景颜色：<span
class="ie6"
style="background-color: #ccc;">#ccc</span></p>

        <p>IE7下背景颜色：<span
class="ie7"
style="background-color: #666;">#666</span></p>

        <p>IE8下背景颜色：<span
class="ie8"
style="background-color: #06f;">#06f</span></p>

        <p>IE9下背景颜色：<span
class="ie9"
style="background-color: #f00;">#f00</span></p>

        <p>IE10下背景颜色：<span
class="ie10"
style="background-color: #0ff;">#0ff</span></p>

        <p>webkit,Safari,Chrome下背景颜色：<span
class="webkit-safari-gg"
style="background-color: #ff0;">#ff0</span></p>

        <p>FireFox下背景颜色：<span
class="firefox"
style="background-color: #f0f;">#f0f</span></p>

        <p>Opera下背景颜色：<span
class="opera"
style="background-color: #0f0;">#0f0</span></p>

    </div>

</div>

CSS部分，此部分就只贴Hack部分的代码吧，布局的就不贴了:





1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

.content .test {

    width: 200px;

    height: 200px;

    background: #f60; /*all*/

    background: #06f9; /*IE*/

    *background: #666; /*IE6,7*/

    _background: #ccc; /*IE6*/

}

   

/* webkit and opera */

@media all
and (min-width:0){

    .content .test {

        background: #0f0;

    }

}

   

/* webkit */

@media screen
and (-webkit-min-device-pixel-ratio:0) {

    .content .test {

        background: #ff0;

    }

}

   

/*FireFox*/

@-moz-document url-prefix() {

    .content .test {

        background: #f0f;

    }

}

   

/*IE9+*/

@media all
and (min-width:0) {

    .content .test{

        background: #f009;

        }

}

   

/*IE10+*/

@media screen
and (-ms-high-contrast: active), (-ms-high-contrast: none) {

    .content .test {

        background: #0ff;

    }

}

下面是在线演示以及源码下载：

Demo 　 Download

CSS Hack大全-可区分出IE6-IE10、FireFox、Chrome、Opera,布布扣,bubuko.com

时间： 2024-10-23 21:47:03

CSS Hack大全-可区分出IE6-IE10、FireFox、Chrome、Opera的相关文章

2.css hack 大全【转】

做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验.可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况.今天,结合自己的经验和理解,做了几个demo把IE6~IE10和其他标准浏览器的CSS hack做一个总结,也许本文应

史上最全的css hack（ie6-9,firefox,chrome,opera,safari）

在这个浏览器百花争鸣的时代,作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心,主要体现在javascript和css上面.javascript我这次就不谈了,先说说css. 为了适应不同浏览器不同的版本(版本主要就ie来说),ie这朵奇葩现在我们要兼容6-9,它的10也快出来了...在ie下我们可以写条件注释来区分 ie和其他浏览器,以及ie的版本,这些请大家自行google.这篇文章主要讨论的是css hack.下面废话补多说了,直接上代码 <!DOCTYPE html>  

CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera

今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐.Chrome.Opera浏览器的Hack,并把这些CSS Hack综合的一起,写了一个小的浏览器测试器 现在的浏览器IE6-IE10.Firefox.Chrome.Opera.Safari...数量众多,可谓百家争鸣,对用户来说有了很多的可选择型,不过这可就苦了Web前端开发人员了.今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐.Chrome.Opera浏览器的Hack,并把这些CSS H

CSS hack是什么？IE6\7\8\9\10浏览器的CSS hack大全介绍

CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozillafirefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果. 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果. 这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack!目前IE内核浏览器仍然是国内主流浏览器,占据着PC浏览器的

Css Hack 大全（IE6、IE7、IE8、IE9 css hack）

一.IE6 css hack: 1. *html Selector {} /* Selector 表示 css选择器 下同 */ 2. Selector { _property: value; } /* property: value 表示 css 的属性名: 属性值 下同 */ 3. Selector { _property/**/: /**/value; } 4. Selector { -property: value; } /*IE6 css hack常用习惯推荐使用下划线_ */ 二.I

CSS hack大全&amp;详解（什么是CSS hack）

1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同的CSS样式的目的,比如.kwstu{width:300px;_width:200px;},一般浏览器会先给元素使用width:300px;的样式,紧接着后面还有个_width:200px;由于下划线_width只有IE6可以识别,所以此样式在IE6中实际设置对象的宽度为200px,后面

css hack 大全

1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同的CSS样式的目的,比如.kwstu{width:300px;_width:200px;},一般浏 览器会先给元素使用width:300px;的样式,紧接着后面还有个_width:200px;由于下划线_width只有IE6可以识别,所以此样式 在IE6中实际设置对象的宽度为200px,

CSS hack大全

1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同的CSS样式的目的,比如.kwstu{width:300px;_width:200px;},一般浏览器会先给元素使用width:300px;的样式,紧接着后面还有个_width:200px;由于下划线_width只有IE6可以识别,所以此样式在IE6中实际设置对象的宽度为200px,后面

css hack 大全 各个浏览器的css

各个浏览器的css hack区别属性: IE6: _zoom:1; IE6/7: *zoom:1; IE6/7/8/9 :\9 各个浏览器的css hack区别规则 IE6: *html{} IE7: +.class{} 非IE6: html>body {} 仅火狐:@-moz-document url-prefix(){} saf3+和谷歌:@media all and (-webkit-min-device-pixel-ratio:0){} 仅opera:@media all and (-w