piczoom兼容性问题_浏览器不兼容原因及解决方案

浏览器间不兼容原因及解决办法

网页设计遇到最大的麻烦之一莫

过于网页对不同浏览器的兼容性问题了，

因为

IE

6.0

/

IE

7.0 / firefox 2 / Opera 9

等主流浏览器对

CSS

解析不近相同，导致设计的页面效果不一样，

所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢？广泛被使用的方法就是

CSS

Hack

，

即使用特别的

CSS

定义显示网页在不同浏览器的设计风格，

针对不同的浏览器去写不同的

CSS

，最大化兼容浏览器。

一般情况下，我都会兼顾

IE 6.0 / IE 7.0 / firefox 2.0

浏览器，

下面是用的较频繁的

CSS Hack

技巧

：

用的最广莫过于

!important

了，

它可以针对

IE

(

IE

7.0

能正确理解

!important

)和非

IE

浏览

器设置不同的样式，

只要在非

IE

浏览器样式的后面加上

!important

，

就可以针对其优先了。

所

以

为了兼顾

IE 6.0

与火狐之间的差异，我都会使用

!important

。

1

、仅

IE7

与

IE5.0

可以识别

*+html select {„}

当面临需要只针对

IE7

与

IE5.0

做样式的时候就可以采用这个

HACK

。

2

、仅

IE7

可以识别

*+html select {„!important;}

当面临需要只针对

IE7

做样式的时候就可以采用这个

HACK

。

3

、

IE6

及

IE6

以下识别

* html select {„}

这个地方要特别注意很多博客都写成了是

IE6

的

HACK

其实

IE5.x

同样可以识别这个

HACK

。

其它

浏览器不识别。

4

、

html/**/

>body select {„}

这句与上一句的作用相同。

5

、仅

IE6

不识别，屏蔽

IE6

select { display /*

屏蔽

IE6*/:none;}

这里主要是通过

CSS

注释分开一个属性与值，注释在冒号前。

6

、仅

IE6

与

IE5

不识别，屏蔽

IE6

与

IE5

select/**/ { display /*IE6,IE5

不识别

*/:none;}

这里与上面一句不同的是在选择符与花括号之间多了一个

CSS

注释。不屏蔽

IE5.5

7

、仅

IE5

不识别，屏蔽

IE5

select/*IE5

不识别*/ {„}

这一句是在上一句中去掉了属性区的注释。只有

IE5

不识别，

IE5.5

可以识别。

8

、盒模型解决方法

selct {width:IE5.x

宽度

; voice-

family :”

\

”}

\

”"; voice

-family:inherit; width:

正确

宽度

;}

盒模型的清除方法不是通过

!important

来处理的。这点要明确。

9

、只有

Opera

识别

@media all and (min-

width: 0px){ select {„„} }

针对

Opera

浏览器做单独的设定。

以上都是写

CSS

中的一些

HACK

，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内

容也分离出来，

不妨试一下下面的几种过滤器。

这些过滤器有的是写在

CSS

中通过过滤器导入特