css hack合集

在前端开发中最烦人的问题莫过于浏览器兼容性问题了，下面是我工作依赖积累的CSS hack笔记，都是再线上使用过的哦，都是经过考验的！

Webkit内核CSS hack（Chrome、Safari、Opera）。
注：很奇怪，在Windows10中的Edge（版本是13）下，竟然也起作用，莫非微软要向Webkit看齐？

@media screen and (-webkit-min-device-pixel-ratio:0) {
.demo {/* 这里写只在Webkit内核的浏览器下起作用的样式 */ }
}

Firefox CSS hack@-moz-document url-prefix(){.demo { /*  这里写写只在firefox中起作用的样式*/}
}

IE8/9/10/11 CSS hack @media screen\0 {.demo{
/* 这里写在IE 8 9 10 11下起作用的样式 */ }
}

IE6/7/8 CSS hack @media \0screen\,screen\9 {.demo{/* 这里写在IE 6 7 8 下起作用的样式 */}
}

IE9/10 CSS hack

注：IE9/10能识别CSS属性值后面的\9\0,所以想要在IE9/10下表现出来的样式，可以在后面加\9\0即可
此hack有一个问题，即设置的所有属性在IE7下都不起作用，可以使用 IE6/7 的hack来修复一下

display: none\9\0;

IE6/7 CSS hack

注：IE6/7能识别CSS属性前面的 ,所以想要在IE6/7下表现出来的样式，可以在前面面加即可

*display:none;

IE8 CSS hack

@media \0screen\,screen\9 {
.demo{/* 这里写在IE8 下起作用的样式 */}

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>测试CSS HACK</title> <style type="text/css"> /* webkit css hack */ .webkit-hack{ color:green; } @media screen and (-webkit-min-device-pixel-ratio:0) { .webkit-hack { color:red; } } /* firefox css hack */ .firefox-hack{ color:green; } @-moz-document url-prefix(){ .firefox-hack{ color:red; } } /* IE8/9/10/11 css hack */ .IE-hack{ color:green; } @media screen\0 { .IE-hack{ color:red; } } /* IE6/7/8 css hack */ .IE678-hack{ color:green; } @media \0screen\,screen\9 { .IE678-hack{ color:red; } } /*


IE7 CSS hack

注：IE7的单独的CSS hack 必须结合着IE6的hack使用

*color:red;_color:green;


IE6 CSS hack

_color:green;


结束语：在工作中有时候我需要单独使用IE9 hack，但是我并没有发现有IE9的hack，如果有那位同学知道的话麻烦告知我

我写了一个例子，大家可以拷贝到自己本地，使用各种浏览器测试一下：
<!DOCTYPE html>

 <html lang="zh-CN">

 <head>

 <meta charset="UTF-8">

 <title>测试CSS
HACK</title>

 <style type="text/css">

 /* webkit css hack */

 .webkit-hack{ color:green; }

 @media screen and (-webkit-min-device-pixel-ratio:0) { .webkit-hack { color:red; } } 

/* firefox css hack */

 .firefox-hack{ color:green; }

 @-moz-document url-prefix(){ .firefox-hack{ color:red; } } 

/* IE8/9/10/11 css hack */

.IE-hack{ color:green; }

@media screen\0 { .IE-hack{ color:red; } } 

/* IE6/7/8 css hack */

.IE678-hack{ color:green; }

@media \0screen\,screen\9 { .IE678-hack{ color:red; } }

IE9/10 css hack
他有一个问题：
无法在IE7及以下起作用即在IE7及以下2个color都不起作用，文本显示为黑色
所以可以用IE6/7的hack修复一下

*/.IE910-hack{ color:green;color:red\9\0;*color:green;
/* 修复一下，让IE6/7还是显示绿色 */
} /* IE67 css hack */
.IE67-hack{
color:green;
*color:red;
} /* IE8 hack */
.IE8-hack{
color:green;
}@media \0screen\,screen\9 { .IE8-hack{color:red;*color:green; }
}/*


IE7 css hack
听说在傲游浏览器下也起作用？
那位同学试一下，并且把起作用的傲游浏览器版本区间告诉我

*/
.IE7-hack{color:green;*color:red;_color:green;}/* IE6 css hack */
.IE6-hack{
color:green;_color:red;
}
</style>
</head><body><p class="webkit-hack">我在webkit内核浏览器下显示为红色，在其他非webkit内核浏览器下显示为绿色</p><p class="firefox-hack">我在firefox浏览器下显示为红色，在其他浏览器下显示为绿色</p><p class="IE-hack">我在IE8/9/10/11浏览器下显示为红色，在其他浏览器下显示为绿色</p><p class="IE678-hack">我在IE6/7/8浏览器下显示为红色，在其他浏览器下显示为绿色</p><p class="IE910-hack">我在IE9/10浏览器下显示为红色，在其他浏览器下显示为绿色</p><p class="IE67-hack">我在IE6/7浏览器下显示为红色，在其他浏览器下显示为绿色</p><p class="IE8-hack">我在IE8浏览器下显示为红色，在其他浏览器下显示为绿色</p><p class="IE7-hack">我在IE7浏览器下显示为红色，在其他浏览器下显示为绿色</p><p class="IE6-hack">我在IE6浏览器下显示为红色，在其他浏览器下显示为绿色</p></body></html>

css hack合集相关推荐

24个 CSS 高级技巧合集
列表: 1.使用CSS复位 2.继承 box-sizing 3.使用unset而不是重置所有属性 4.使用 :not() 选择器来决定表单是否显示边框 5.为 body 元素添加行高 6.為表單元素設 ...
有趣且重要的css知识合集（1）纯css实现div左右拖拽效果
目前我看主流的都是用js来实现div拖拽效果,不过我个人觉得一直监听拖拽,会耗费很大的性能,毕竟监听盒子的宽高这些属性,都会触发浏览器的回流,并且我看了很多博客,他们是能用css实现div左右拖拽效果 ...
有趣且重要的css知识合集（6）动态控制css伪元素【var()】
在vue里,js和css的属性可以随意控制,比如:class和:style,但是我们想要动态控制伪元素的属性该怎么做呢? 比如下图,右下角小圆圈就是通过伪元素定义上去的,那我们想要自由实现伪元素的显示 ...
2017年8月前端开发者超实用干货大合集
2017年8月前端开发者超实用干货大合集在过去的几年当中,网络上所流传的各种设计和开发资源,在素质上有明显的提升.其中有一些已经几乎成为了设计师和开发者必备的工具,但是其中绝大多数由于其应用范畴的局 ...
暑期干货！2017年8月前端开发者超实用干货大合集
在过去的几年当中,网络上所流传的各种设计和开发资源,在素质上有明显的提升.其中有一些已经几乎成为了设计师和开发者必备的工具,但是其中绝大多数由于其应用范畴的局限,或者传播不够广,导致它们大多并广为人知 ...
5去掉button按钮的点击样式_各种好看的小按钮合集，纯css编写，最近在学习时遇到的，记录成为笔记...
写在前面最近忙着实习的事,前往广州,租房,置办东西等等.用碎片化的时间看了一些博客,也看到不少我认为很不错的通过纯css来打造的按钮样式.记录下来以后开发的时候或许能用上. 亮起来按钮 <di ...
button按钮样式_各种好看的小按钮合集，纯css编写，最近在学习时遇到的，记录成为笔记...
写在前面最近忙着实习的事,前往广州,租房,置办东西等等.用碎片化的时间看了一些博客,也看到不少我认为很不错的通过纯css来打造的按钮样式.记录下来以后开发的时候或许能用上. 亮起来按钮 < 简 ...
强大的CSS：图形绘制合集，方便你我！
以下这些造型简单的图形都是纯CSS外加一个HTML标签实现的,不少实现以前我介绍过,或者你也知道,但是有些相信你没见过. 1. 正方形实时渲染效果如下: 相关CSS代码: #square {widt ...
稳态血浆药物浓度css名词解释,生物药剂学名词解释大合集
生物药剂学名词解释大合集 1．生物药剂学:是研究药物极其剂型在体内的吸收,分布,代谢与排泄的过程,阐明药物的剂型因素,机体生物因素和药效之间相互的科学. 2治疗药物监测(TDM)又称临床药动学监测,是 ...

css hack合集

css hack合集相关推荐

最新文章

热门文章