浏览器兼容

Posted 2021-04-30 达内UI培训UE培训

先来说说什么是浏览器兼容？

 

对于很多初学者来说先要知道目前主流的浏览器有IE6、IE8、Mozilla、 FireFox、Opera、Safari、Chrome、Netscape等。这些主流的浏览器主要由四个内核程序来服务：

Trident内(IE,MaxThon,TT,The World,360,搜狗浏览器等)

Gecko内核(Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等)

Presto内核(Opera7及以上 )

Webkit内核(Safari,Chrome)

由于浏览器的内核程序不同，所以不同内核程序在对CSS的解析的时候也会有所差别，这种差别会导致生成的页面效果不一样，得不到我们所需要的页面效果。即兼容问题。

 

如何能做到浏览器兼容？

1、合理化使用标签与CSS

2、使用HACK代码

 

先说合理化使用标签与CSS。

到底怎么样才是合理的呢？简单讲从这几点着手：

1布局时，非不得已，尽量用“块”标签作为外围来包含“内联”标签。

2弄清楚你所用的标签默认拥有哪些属性，方便重置，并且可以知道属性的默认值是否相同

3针对低版本浏览器而言，标签用的越少越好。所以尽量少用且不用新标签。

 

再说HACK代码方式

什么是CSS hack？

针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。其实CSS hack是一种类似作弊的手段，以欺骗浏览器的方式达到兼容的目的，是用浏览器的兼容性差异来解决浏览器的兼容性问题。这种方法快捷、简单粗暴。

下面列出一些HACK代码：

1、  Firefox

@-moz-document url-prefix() {

                              .selector {

                                 property: value;

                              }

}

2、  Webkit内核浏览器(chrome andsafari)

@media screen and(-webkit-min-device-pixel-ratio:0)  {

                                     Selector{ property: value; }

}

3、  Opera浏览器

@media all and (min-width:0) {

                                     Selector{property: value;}

}

4、  IE9浏览器

:root Selector {property: value\9;}

5、  IE9以及IE9以下版本

Selector {property:value\9;}

6、  IE8浏览器

@media \0screen{

                                               Selector{property: value;}

                                     }

7、  IE8以及IE8以上的版本

Selector {property: value\0;}

8、  IE7浏览器

*+html Selector{property:value;}

                            或

*:first-child+html Selector{property:value;}

9、  IE7及IE7以下版本浏览器

Selector {*property: value;}

10、         IE6浏览器

Selector {_property/**/:/**/value;}

或者：

Selector {_property: value;}

或者：

*html Selector {property: value;}

 

如果大家需使用更多hack代码可以去下面的网站查询，主流浏览器的hack代码都有：

http://browserhacks.com/

 

忠告：

在Web页面制作中尽量不要使用CSS Hack来处理兼容问题。因为任何浏览器下出现渲染不一致都极有可能是我们自己的结构或样式不符合W3C的某些要求，或者说违背了浏览器的某些规则而造成的，所以我们应该尽量通过结构或CSS的修改来达到各浏览器渲染一致效果，除非到了万不得已情况下，才考虑CSS的Hack。