在前端开发中最烦人的问题莫过于浏览器兼容性问题了,下面是我工作依赖积累的CSS hack笔记,都是再线上使用过的哦,都是经过考验的!
Webkit内核CSS hack(Chrome、Safari、Opera)。
注:很奇怪,在Windows10中的Edge(版本是13)下,竟然也起作用,莫非微软要向Webkit看齐?
@media screen and (-webkit-min-device-pixel-ratio:0) {
.demo {
}
}
Firefox CSS hack
@-moz-document url-prefix(){
.demo {
}
}
IE8/9/10/11 CSS hack
@media screen {
.demo{
}
}
IE6/7/8 CSS hack
@media screen,screen9 {
.demo{
}
}
IE9/10 CSS hack
注:IE9/10能识别CSS属性值后面的9 ,所以想要在IE9/10下表现出来的样式,可以在后面加9 即可
此hack有一个问题,即设置的所有属性在IE7下都不起作用,可以使用 IE6/7 的hack来修复一下
display: none9 ;
IE6/7 CSS hack
注:IE6/7能识别CSS属性前面的 ,所以想要在IE6/7下表现出来的样式,可以在前面面加 即可
*display:none;
IE8 CSS hack
@media screen,screen9 {
.demo{
}
}
IE7 CSS hack
注:IE7的单独的CSS hack 必须结合着IE6的hack使用
*color:red; _color:green;
IE6 CSS hack
_color:green;
结束语:在工作中有时候我需要单独使用IE9 hack,但是我并没有发现有IE9的hack,如果有那位同学知道的话麻烦告知我
我写了一个例子,大家可以拷贝到自己本地,使用各种浏览器测试一下:
测试CSS HACK .webkit-hack{ color:green; } @media screen and (-webkit-min-device-pixel-ratio:0) { .webkit-hack { color:red; } } .firefox-hack{ color:green; } @-moz-document url-prefix(){ .firefox-hack{ color:red; } } .IE-hack{ color:green; } @media screen { .IE-hack{ color:red; } } .IE678-hack{ color:green; } @media screen,screen9 { .IE678-hack{ color:red; } } .IE910-hack{ color:green; color:red9 ; *color:green; } .IE67-hack{ color:green; *color:red; } .IE8-hack{ color:green; } @media screen,screen9 { .IE8-hack{ color:red; *color:green; } } .IE7-hack{ color:green; *color:red; _color:green; } .IE6-hack{ color:green; _color:red; } 我在webkit内核浏览器下显示为红色,在其他非webkit内核浏览器下显示为绿色
我在firefox浏览器下显示为红色,在其他浏览器下显示为绿色
我在IE8/9/10/11浏览器下显示为红色,在其他浏览器下显示为绿色
我在IE6/7/8浏览器下显示为红色,在其他浏览器下显示为绿色
我在IE9/10浏览器下显示为红色,在其他浏览器下显示为绿色
我在IE6/7浏览器下显示为红色,在其他浏览器下显示为绿色
我在IE8浏览器下显示为红色,在其他浏览器下显示为绿色
我在IE7浏览器下显示为红色,在其他浏览器下显示为绿色
我在IE6浏览器下显示为红色,在其他浏览器下显示为绿色



