您的位置:首页 > 其它

常见浏览器HACK技巧总结

2014-08-13 15:10 609 查看

IE Hack

IE系列浏览器的hack大略如下:

_nowamagic:1px;-----------ie6
*nowamagic:1px;-----------ie7
nowamagic:1px\0;----------ie89
nowamagic:1px\9\0;--------ie9
:root nowamagic:1px;----ie9(实际情况可能ie9还是有问题,再用这种方式)
这样就基本上就可以兼容所有IE。



其中粉红色部分为属性hack,黄色部分为选择器hack,它们可以结合使用。此外Firefox和Chrome也有它们专有的hack,详细hack方式及使用示例如下:

Firefox 与 Chrome 的 Hack

Firefox:

view source

print?

1
@-moz-document url-prefix()

/*写在选择器外层时(只可写在此处):Firefox only*/
Chrome:

view source

print?

1
@media
screen

and (-webkit-min-device-pixel-ratio:
0
)
/*写在选择器外层时(只可写在此处):Chrome only*/
使用示例:

view source

print?

1
@-moz-document url-prefix()

/*Firefox*/
2
{
3
body
4
{
5
background-color
:pink;
6
}
7
}
浏览器对css的解析是从前到后的,并且采用最后一个样式声明。

CSS 实例

view source

print?

1
.color{
2
background-color
:
#CC00FF
;

/*所有浏览器都会显示为紫色*/
3
background-color
:
#FF0000
\
9
;
/*IE6、IE7、IE8会显示红色*/
4
*
background-color
:
#0066FF
;

/*IE6、IE7会变为蓝色*/
5
_background-color
:
#009933
;

/*IE6会变为绿色*/
6
}
view source

print?

1
background
:
red
;
/* 对FF Opera和Safari有效 */
2
#bac
kground:
blue
;
/* 对 IE6 和 IE7有效 */
3
_background
:
green
;

/* 只对IE6有效 */
4
/*/background: orange;*/

/** 只对IE8有效 **/
5
!important
/*FF、IE7有效*/
6
* 
/*IE都有效*/
IE8是可以和IE7兼容的,简单一行代码,让IE8自动调用IE7的渲染模式。只需要在页面中加入如下HTTP meta-tag:<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />,只要IE8读到这个标签,它就会自动启动IE7兼容模式,保证页面完整展示。

混用起来大约是这样:

view source

print?

01
:root .demo {
02
background
:
#963
\
9
;
/* 仅IE9适用 */
03
}
04
.demo {
05
width
:
300px
;
06
height
:
200px
;
07
background
:
#036
;
/* 所有浏览器都适用 */
08
background
:
#09F
\
9
;
/* IE6~IE9 */
09
background
:
#09F
\
0
;
/* IE8~IE9 */
10
background
:
#09F
\
0
/;
/* IE8 */
11
*
background
:
#F60
;
/* IE6/IE7 */
12
+
background
:
#F60
;
/* IE6/IE7 */
13
@
background
:
#F60
;
/* IE6/IE7 */
14
>
background
:
#F60
;
/* IE6/IE7 */
15
_background
:
#ccc
;
/* IE6 */
16
}
17
@media
all

and (
min-width
:
0
) {
18
.demo {
19
background
:
#F06
;
/* webkit and opera */
20
}

21
}
22
 
23
@media
screen

and (-webkit-min-device-pixel-ratio:
0
){
24
.demo {
background
:
#609
;}
/*webkit
(& Opera9.2)*/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: