NMS项目系列总结——debug篇（一）兼容性问题

最新推荐文章于 2022-05-08 16:21:56 发布

独孤文彬

最新推荐文章于 2022-05-08 16:21:56 发布

阅读量1k

点赞数

分类专栏： ●编程语言

本文链接：https://blog.csdn.net/t131452n/article/details/46483249

版权

●编程语言专栏收录该内容

111 篇文章 0 订阅

订阅专栏

前言：

在谈这个问题之前，我想咱们最好还是结合前面一篇博客《NMS项目——拓展知识网（一）浏览器为何物？》中谈到的关于浏览器的一些知识来认识这个问题。我们知道web服务也称万维网服务的内容基本都是通过浏览器来实现展示的。客户端浏览程序即浏览器通过http发送各种请求，并对从服务器发来的超文本信息（HTML、XML）等进行解析、处理、展示和播放。

那么，为什么存在这个所谓的兼容性问题呢？其实，所谓的兼容性问题，一般就是说的网页的显示效果的问题。比如：同样的一段HTML代码在A浏览器显示效果和在浏览器B的效果是不一样的，看一幅图吧还是。有图有真相（同样的css样式设置代码和HTML代码情况下。）

火狐中的效果如下图：

在IE和谷歌浏览器中的效果如下图

以上就是不同浏览器的不同显示，这就是兼容性问题的一个表现。到底是什么导致的呢？其影响因素就是浏览器的内核。说到内核，就不得不提到浏览器的一个结构的问题了，还记得在上篇博客中咱们了解到，浏览器的架构。大概是有7大部分组成，我们可以把它分为两类。一类负责前台显示分别是：用户界面、浏览器引擎、渲染引擎、js引擎，另一类负责后台支持分别是：用户接口后端、网络、js解释器、数据存储。所谓内核就是2个引擎，一个是渲染引擎一个是js引擎。这两个都是负责前台的显示的。不同的内核对于HTML的代码或者css样式、js代码的解析都是不一样的。

市面上比较流行的几款浏览器内核分别是：

1、Trident(IE内核)：代表浏览器IE。MS帝国捆绑Windows的默认浏览器，市场占有率相当高。

2、Gecko(Firefox内核)：代表浏览器Mozilla Firefox。开源的内核，非常受欢迎。

3、Webkit(Safari内核,Chrome内核原型,开源):它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。代表浏览器：safari

4、Blink：是一个由Google和Opera Software开发的浏览器排版引擎。代表浏览器：chrome，Opera

5、Presto(Opera前内核) (已废弃)： Opera12.17及更早版本曾经采用的内核，现已停止开发并废弃，该内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，然而代价是牺牲了网页的兼容性。

讲到这里就算是基本上说明了为什么出现兼容性（不同的显示效果）问题了。接下来，看看咱们的前辈们都有什么聪明的解决办法吧！

Css hack简介：

由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code就称为CSS hack。常用的CSS hack 有三种方式，CSS 内部hack、选择器hack、HTML 头部引用，其中第一种最常用。

其实，个人觉得它和C++中的条件编译很像，代码都写好了根据一定的优先级或者说是条件判断去执行相应的代码，以得到不同的显示效果。

使用方法：

1 CSS hack方式一：条件注释法。

只在IE8上不生效
	<!--[if ! IE 8]>
	这段文字在非IE8浏览器显示

    <![endif]-->

非IE浏览器生效
	<!--[if !IE]>
	这段文字只在非IE浏览器显示
	<![endif]-->
   2 类内属性前缀法。是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

例如：

<span style="font-size:18px;">/*demo*/  
.iehack{  
/*该demo实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack，注意顺序 
IE6显示为：绿色， 
IE7显示为：黑色， 
IE8显示为：红色， 
IE9显示为：蓝色， 
Firefox/Chrome显示为：橘色， 
（本例IE10效果同IE9,Opera最新版效果同IE8） 
*/  
    background-color:orange;  /* all - for Firefox/Chrome */  
    background-color:red\0;  /* ie 8/9/10/Opera - for ie8/ie10/Opera */  
    background-color:blue\9\0;  /* ie 9/10 - for ie9/10 */  
    *background-color:black;  /* ie 6/7 - for ie7 */  
    _background-color:green;  /* ie 6 - for ie6 */  
}  </span>
  3 选择器前缀法：是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

例如：

   *html *前缀只对IE6生效

   *+html *+前缀只对IE7生效
   @media screen\9{...}只对IE6/7生效
   @media \0screen {body { background: red; }}只对IE8有效
   @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
   @media screen\0 {body { background: green; }} 只对IE8/9/10有效
   @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效

小结：以上便是对浏览器兼容性问题一个研究，其实东西还是老一套，换了个新衣服而已。可能有很多地方了解不够深入，希望和大家多多交流这方面的知识。