CSS hack
2016-05-26 13:06
555 查看
Firefox 浏览器
@-moz-document url-prefix() {
.selector {
property: value;
}
}
支持所有Gecko内核的浏览器 (包括Firefox)
*>.selector { property: value; }
Webkit 内核浏览器
@media screen and (-webkit-min-device-pixel-ratio: 0) {
Selector {
property: value;
}
}
Opera 浏览器
html:first-child>b\ody Selector {property:value;}
IE 浏览器
IE 浏览器针对不同的版本有不同个Hack方式。
IE 9
:root Selector {property: value\9;}
IE 9-
Selector {property: value\9;}
IE 8
Selector {property: value/;}
或:
@media \0screen {
Selector {property: value;}
}
IE 8+
Selector {property: value\0;}
IE 7
*+html Selector{property:value;}
或:
*:first-child+html Selector {property:value;}
IE 7-
Selector {*property: value;}
IE6
Selector {
_property: value;
}
或者:
*html Selector {
property: value;
}
Hack应用情境(一)
适用范围:IE:6.0,IE7.0,IE8.0之间的兼容
实例说明:
此例中我们使用了渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。接着,再次使用“+”将IE8和IE7、IE6分离开来,此时,我们的IE8已经独立识别。
实例代码:
.bb{
height:32px;
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
/*一个用于展示的class为bb的div标签*/
< div class ="bb"></ div >
Hack应用情境(三)
适用范围:IE:6.0,IE7.0,IE8.0,Firefox,Safari(Chrome)之间的兼容
实例说明:
我们现在将再次对我们的CSS进行加强了,使其能识别Safari(Chrome)游览器。这是基于它们的内核webkit来识别的,用法为@media screen and (-webkit-min-device-pixel-ratio:0)
实例代码:
.bb{
height:32px;
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /*safari(Chrome) 有效 */
.bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 识别 */
@-moz-document url-prefix(){.bb{background-color:#00ff00;}}/*仅firefox 识别*/
* +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */
/*一个用于展示的class为bb的div标签*/
< div class ="bb"></ div >
Hack应用情境(四)
适用范围:IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome全兼容
实例说明:
实例的具体代码在下面实例代码中已经列出,具体效果如此页面的顶端部分效果,您可以通过不同游览器检测该效果。这次我们基本把所有的主流游览器都兼容了,大家来看下代码。Opera的识别有一部分归功于“\0”标记,这个标记只被IE8和Opera识别,特殊的标记往往造就的是我们更广泛的hack手段。下例的代码比较完整,大家可以选择参考。
实例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<meta http-equiv=Content-Type content="text/html;
charset=gb2312"/>
<style type="text/css">
/***************************************** 各游览器兼容CSS **********************************************/
.bb{height:32px;background-color:#f1ee18;/*所有识别*/ background-color:#00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1/*IE6识别*/}
@media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /* Safari(Chrome) 有效 */
@media all and (min-width: 0px){ .bb{background-color:#f1ee18;/*opera and Safari(Chrome) and firefox*/ background-color:#4cac70\0;}/*
仅 Opera 有效 */ }{}
.bb, x:-moz-any-link, x:default{background-color:#4eff00;/*IE7、Firefox3.5及以下 识别 */}
@-moz-document url-prefix(){.bb{background-color:#4eff00;/*仅 Firefox 识别 */}}
* +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */
/* 一般情况下 我们区分IE7 只用 +background-color 配合 _background-color 就行了 如果必须写 .bb, x:-moz-any-link, x:default 这样的代码区分 Firefox3.5及以下 则谨记此写法对IE7也有效,故在其中要再重写一次 +background-color 或者使用 * +html .bb{background-color:blue;} 方法仅对
IE7 有效。可使用 @-moz-document url-prefix(){} 方法独立区分所有 firefox */
@-moz-document url-prefix() {
.selector {
property: value;
}
}
支持所有Gecko内核的浏览器 (包括Firefox)
*>.selector { property: value; }
Webkit 内核浏览器
@media screen and (-webkit-min-device-pixel-ratio: 0) {
Selector {
property: value;
}
}
Opera 浏览器
html:first-child>b\ody Selector {property:value;}
IE 浏览器
IE 浏览器针对不同的版本有不同个Hack方式。
IE 9
:root Selector {property: value\9;}
IE 9-
Selector {property: value\9;}
IE 8
Selector {property: value/;}
或:
@media \0screen {
Selector {property: value;}
}
IE 8+
Selector {property: value\0;}
IE 7
*+html Selector{property:value;}
或:
*:first-child+html Selector {property:value;}
IE 7-
Selector {*property: value;}
IE6
Selector {
_property: value;
}
或者:
*html Selector {
property: value;
}
Hack应用情境(一)
适用范围:IE:6.0,IE7.0,IE8.0之间的兼容
实例说明:
此例中我们使用了渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。接着,再次使用“+”将IE8和IE7、IE6分离开来,此时,我们的IE8已经独立识别。
实例代码:
.bb{
height:32px;
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
/*一个用于展示的class为bb的div标签*/
< div class ="bb"></ div >
Hack应用情境(三)
适用范围:IE:6.0,IE7.0,IE8.0,Firefox,Safari(Chrome)之间的兼容
实例说明:
我们现在将再次对我们的CSS进行加强了,使其能识别Safari(Chrome)游览器。这是基于它们的内核webkit来识别的,用法为@media screen and (-webkit-min-device-pixel-ratio:0)
实例代码:
.bb{
height:32px;
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /*safari(Chrome) 有效 */
.bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 识别 */
@-moz-document url-prefix(){.bb{background-color:#00ff00;}}/*仅firefox 识别*/
* +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */
/*一个用于展示的class为bb的div标签*/
< div class ="bb"></ div >
Hack应用情境(四)
适用范围:IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome全兼容
实例说明:
实例的具体代码在下面实例代码中已经列出,具体效果如此页面的顶端部分效果,您可以通过不同游览器检测该效果。这次我们基本把所有的主流游览器都兼容了,大家来看下代码。Opera的识别有一部分归功于“\0”标记,这个标记只被IE8和Opera识别,特殊的标记往往造就的是我们更广泛的hack手段。下例的代码比较完整,大家可以选择参考。
实例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<meta http-equiv=Content-Type content="text/html;
charset=gb2312"/>
<style type="text/css">
/***************************************** 各游览器兼容CSS **********************************************/
.bb{height:32px;background-color:#f1ee18;/*所有识别*/ background-color:#00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1/*IE6识别*/}
@media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /* Safari(Chrome) 有效 */
@media all and (min-width: 0px){ .bb{background-color:#f1ee18;/*opera and Safari(Chrome) and firefox*/ background-color:#4cac70\0;}/*
仅 Opera 有效 */ }{}
.bb, x:-moz-any-link, x:default{background-color:#4eff00;/*IE7、Firefox3.5及以下 识别 */}
@-moz-document url-prefix(){.bb{background-color:#4eff00;/*仅 Firefox 识别 */}}
* +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */
/* 一般情况下 我们区分IE7 只用 +background-color 配合 _background-color 就行了 如果必须写 .bb, x:-moz-any-link, x:default 这样的代码区分 Firefox3.5及以下 则谨记此写法对IE7也有效,故在其中要再重写一次 +background-color 或者使用 * +html .bb{background-color:blue;} 方法仅对
IE7 有效。可使用 @-moz-document url-prefix(){} 方法独立区分所有 firefox */
相关文章推荐
- Draw a Tree Structure With Only CSS
- 如何提升我的HTML&CSS技术,编写有结构的代码
- CSS 3 中 -webkit-, -moz-, -o-, -ms- 这些私有前缀
- CSS3选择器学习笔记
- 图解CSS3制作圆环形进度条的实例教程
- CSS的margin属性在页面布局中的使用攻略
- cssViewer牛逼的chrome插件
- css四可见,部分可见和重叠半透明
- 来看看css3中的box-shadow
- css3之渐变
- Material Design-Button的新式样式初探
- gulp构建指令
- NPOI之Excel——合并单元格、设置样式、输入公式
- NPOI之Excel——合并单元格、设置样式、输入公式
- css 优先级总结
- 详解rotate3()
- css-三边框,外边距和内边距
- 使用CSS3 :nth-child(n) 選取器教學
- css:使用笔记(不断更新中...)
- css二阴影+第三维度z-index