浏览器不兼容原因及解决方案

admin管理员组

文章数量:1531422

2024年5月26日发(作者：)

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

网页设计遇到最大的麻烦之一莫 过于网页对不同浏览器的兼容性问题了,因为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中通过过滤器导入特

别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

10、IE5。x的过滤器,只有IE5。x可见

@media tty {

i｛content：””；/＊” “*/}｝ ＠import ‘ie5win。css'； /*";｝

｝/* ＊/

11、IE5/MAC的过滤器,一般用不着

/＊＊//*/

@import “ie5mac。css”;

/＊*/

-————-—————-----——---—-—-—-—----—-———--—------————--———

—-————————-—-

12、IE的if条件Hack 。com提供

〈！-—[if IE］> Only IE 〈！[endif］—-〉 所有的IE可识别

<！--[if IE 5。0]〉 Only IE 5。0 〈!［endif]—-〉 只有IE5。0可以识别

〈！—-[if gt IE 5。0]> Only IE 5。0+ 〈![endif]—-〉 IE5.0包换IE5。5都可以识别

〈！—-［if lt IE 6]〉 Only IE 6— 〈！［endif］——> 仅IE6可识别

〈！--[if gte IE 6］> Only IE 6/+ IE6以及IE6以下的IE5。x都可识别

〈！—-［if lte IE 7］> Only IE 7/- 〈！［endif]——> 仅IE7可识别

——-———-—--———---———---——-—---———-————-—---—————--———

-—-——-—---——-

你在写css时样式表加上浏览器标识符就行了，各浏览器区别如下：

IE都能识别＊,标准浏览器（如FF)不能识别*;

IE6能识别＊，但不能识别 ！important；

IE7能识别*,也能识别 !important;

FF不能识别＊,但能识别 ！important；

例如style=”＊width：10px；！important width：20px;"

这样在IE6下宽度为10px，在IE7下宽度时20px

---——————-——————--—-————-———-—————-———----——--——--

————--——--———-—

最新的CSS兼容方案，让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的，

Opear是在测试的时候顺带试了一下，结果发现竟然也行，所以顺便也解决了。

.e ｛/＊FF OP*/

background—color： #FF0000

｝

html＊ 。e｛/＊Sa IE7 OP*/

background—color：＃FF00FF

｝

*+html 。e｛

background—color：＃000000;/*OP＊/

＊background—color：＃0000FF;/＊IE7＊/

}

＊ html .e{/＊IE6*/

background-color:#00FFFF

本文标签： 浏览器兼容识别解决样式