今天把一些常用的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 ;
}
} |
下面是在线演示以及源码下载:
CSS Hack大全-可区分出IE6-IE10、FireFox、Chrome、Opera的更多相关文章
-
CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera
CSS Hack大全-教你如何区分出IE6-IE10.FireFox.Chrome.Opera 转载自:http://www.jb51.net/article/50116.htm 现在的浏览器IE6- ...
-
[转]CSS hack大全&;详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
-
Css Hack 大全(IE6、IE7、IE8、IE9 css hack)
一.IE6 css hack: 1. *html Selector {} /* Selector 表示 css选择器 下同 */ 2. Selector { _property: value; } / ...
-
CSS hack大全
1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以 ...
-
CSS hack大全&;详解(什么是CSS hack)
1.什么是CSS hack? 本文转自程序园学院:http://www.kwstu.com/Admin/ViewArticle/201409011604277330 CSS hack是通过在CSS样式 ...
-
怎么用css hack处理各浏览器兼容IE6,IE7,IE8,IE9/ FF
第一:什么事浏览器兼容性 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题.在网站的设计和制作中,做好浏览器兼容,才能够让网站 ...
-
css hack 大全 各个浏览器的css
各个浏览器的css hack区别属性: IE6: _zoom:1; IE6/7: *zoom:1; IE6/7/8/9 :\9 各个浏览器的css hack区别规则 IE6: *html{} IE7: ...
-
css hack 大全
各个浏览器的css hack区别属性: IE6: _zoom:1; IE6/7: *zoom:1; IE6/7/8/9 :\9 各个浏览器的css hack区别规则 IE6: *html{} IE7: ...
-
css区分ie8/ie9/ie10/ie11 chrome firefox的代码
以下是几个主要浏览器的css hack汇总: 现有css样式为: .class{ color:red; } 判断IE8以上的浏览器才执行的代码/* IE8+ */ .class{ color:red ...
随机推荐
-
Linux基础练习题(二)
Linux基础练习题(二) 1.复制/etc/skel目录为/home/tuer1,要求/home/tuser1及其内部文件的属组和其它用户均没有任何访问权限. [root@www ~]# cp -r ...
-
Poj2676
经典DFS现在看来nice啊! package SoduKu; import java.io.InputStreamReader; import java.util.Scanner; /* *我用ro ...
-
golang笔记——并发
go语言中的main函数也是运行在一个单独的goroutine中的,一般称为 main goroutine,main函数结束时,会打断其它 goroutine 的执行,但是其它 goroutine 不 ...
-
sqoop笔记
adoop学习笔记—18.Sqoop框架学习 一.Sqoop基础:连接关系型数据库与Hadoop的桥梁 1.1 Sqoop的基本概念 Hadoop正成为企业用于大数据分析的最热门选择,但想将你的数 ...
-
Linux下MySQL数据库常用基本操作 一
1.显示数据库 show databases; 2.选择数据库 use 数据库名; 3.显示数据库中的表 show tables; 4.显示数据表的结构 describe 表名; 5.显示表中记录 S ...
-
类或方法名后加<;>;
声明类型为泛型. 说明传递的参数为泛型,而不仅仅是一种类型. public void aa<T>(T a) { Console.WriteLine(a); } 调用时可写: this.aa ...
-
兼容amd,commonjs和browser的模块写法
从uuid.js中抽出来的写法. (function() { var _global = this; // Export public API var obj = {}; obj.attr = fun ...
-
media query
accepted Another useful media feature is device-aspect-ratio. Note that the iPhone 5 does not have a ...
-
解决win10开机出现C:\WIndows\system32\config\systemprofile\Desktop不可用 问题
背景:公司一台win10机子好久没用了,今天开了打算用下(打算远程桌面),远程桌面连不上(好久没用了,用户名都忘了),所以又插上显示器和键鼠. 键盘因为是PS/2接口,不能热插拔,所以开机一段时间后( ...
-
github搭建个人网站
1. 注册账号: 地址: https://github.com/ 输入账号.邮箱.密码,然后点击注册按钮. 2. 初始设置 注册完成后,选择Free免费账号完成设置. 2.1 验证邮箱 请打开你的 ...