IE\firfox\chrome的差异和兼容问题

最新推荐文章于 2023-04-17 19:22:51 发布

little little

最新推荐文章于 2023-04-17 19:22:51 发布

阅读量6.8k

点赞数 1

分类专栏：浏览器文章标签：浏览器

本文链接：https://blog.csdn.net/songlf521/article/details/57565262

版权

浏览器专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、 IE\firfox\chrome的差异

1、IE

    由于IE开始主张的自行标准和w3c标准的冲突，使网页显示在IE上出现十分窘困的局面。不过现在IE已经停止了自作主张，开始逐步向w3c标准靠拢。2016年1月12日，微乳那已经宣布停止对IE8/9/10三个版本的技术支持；微软建议用户升级到IE11或者改用microsoft Edge浏览器。
    IE浏览器使用的内核是trident。几乎完整支持HTML 4.01，CSS Level 1、XML 1.0和DOM Level 1，只是有一些排版错误。它亦部分支持CSS Level 2 和DOM Level 2。它自带的XML解释器支持XHTML，但是微软从IE 5.0以后取消了这一支持，使它变得难以访问。如其它浏览器一样，当MIME类型标识为“text/html”，它能解释为XHTML。
    当MIME类型标识为“application/xml”和“text/xml”时，它也能解释把XHTML解释为XML，但需要一个小的XSLT度量来重新启用XML对XHTML的支持。当把它定义为偏好类型如“application/xhtml+xml”时，它假装不理解XHTML，相反把它当成一种不了解的供下载的文件类型来对待。
### 2、firfox ###
    Mozilla Firefox，中文俗称“火狐”。使用Gecko排版引擎，支持多种操作系统，如Windows、Mac OS X及GNU/Linux等。该浏览器提供了两种版本，普通版和ESR（Extended Support Release，延长支持）版。Firefox ESR 版的升级周期为 42 周，而普通 Firefox 的升级周期为 6 周。

Firefox支持非常多的网络标准，如标准通用标记语言下的子集HTML和XML、XHTML、SVG 1.1（部分的）、CSS（除了标准之外，还有扩充的支持）、ECMAScript（JavaScript）、DOM、MathML、DTD、XSLT、XPath和PNG图像文件（包含透明度支持）。

3、chrome

Google Chrome，是基于其他开放源代码软件所撰写，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。
    chrome，Acid1及Acid2测评均顺利通过，最新的测试版在Acid3中也已达到100分。
    (Acid1为盒模型测试，Acid2为对html\css2.0\PNG图像格式的测试，Acid3是测试对ECMAScript、DOM Level 3、Media Queries和data: URL的支持)

二、三者在html兼容上的差异

html4标签中，常用标签，如

//------------------骨架和头部标签
 <!DOCTYPE>
 <html></html>
 <title></title>
 <link />
 <script></script>
 <style></style>
  //------------------元信息
 <head></head>
 <meta/>
 <base target='_self|_blank'/>
 //---------------程序
 <script></script>
 <noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
 <object data='XXXX.swf'>
    用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash
</object>
<param />和object一起使用，配置样式
 //--------------------------主体标签
 <body></body>
 <h1></h1>to<h6></h6>
 <p></p>
 <br/>
 <hr/>
 <!-- -->
 //----------------------格式标签
 <abbr title="World Health Organization">WHO</abbr> 缩写
 <address>
 <a href='mailto:www.baidu.com'>百度</a></address>
 <b></b> 粗体
 <bdo dir='rtl'>文字从右到左显示。</bdo> dir='ltr'从左向右显示
 <blockquote cite='....com'>引用的段落，cite属性设置引用的地址</blockquote> 
 <cite>引用的标题</cite>
 <code>一段编程代码</code>
 <del>定义被删除的文本</del>
 <em>定义强调文本</em>
 <i></i>
 <ins>插入的文本，带下划线</ins>
 <pre>预格式化文本</pre>
 <q>定义短引用话语，自动带双引号</q>
 <samp>定义样本文本</samp>
 <sub>下标文本</sub>
 <sup>上标文本</sup>
 <u>定义下划线文本</u>
 <var>定义文本变量部分</var>
 //---------------表单标签
 <form></form>
 <input></input>
 <textarea></textarea>
 <button></button>
 <select></select>
 <optgroup label='北京'>定义列表相关项组合</optgroup>
 <option></option>
 <label/>定义input标注
 <fieldset>将表单先关元素分组</fieldset>
 <legend>定义标题</legend>
 //------------------框架
 <iframe src='www.baidu.com'>定义内联框架</iframe>
 //--------------图像
 <img/>
 <map>图像映射，详细设置参见教程，可以在图像上某个区域设置超级链接</map>
 <area>和map配合使用</area>
 //------------------链接
 <a></a>
 <link />
 //------------------列表
 <ul><li></li></ul>
 <ol><li></li></ol>
 <dl><dt></dt><dd></dd></dl>
 //------------------table
 <table></table>
 <caption></caption>
 <thead></thead>
 <th></th>
 <tr></tr>
 <td></td>
 <tbody></tbody>
 <tfoot></tfoot>
 <col>定义表格一个或多个列，教程</col>
 <colgroup>格式化列组</colgroup>
 //-----------------节
 <div></div>
 <span></span>

以上常用标签，大部分主流浏览器(IE\firfox\chrome\opera\safari)都支持，支持至IE8。
还有少数是html4废弃的标签，html5也不再支持，如

   <acronym title='University Apple'>定义只取首字母缩写</acronym>
    <big>定义大号字体</big>
    <center></center>
    <font></font>
    <strike>定义加删除线的文本</strike>
    <tt>定义打字机文本</tt>
    <frame></frame>
    <frameset></frameset>
    <noframes></noframes>
    <dir>定义目录列表</dir>
    <basefont/>
    <applet>定义嵌入的javaweb</applet>

 html4中废弃，html5中重新定义的标签

    <s>h4中废弃，h5中定义，文本加删除线,大部分浏览器都支持</s>
    <menu>h4废弃，h5重新定义的导航标签，大部分浏览器并不支持</menu>

html5中新增的标签

    <bdi>定义一段文本脱离父元素的文本方向设置</bdi>  
    只有firfox和chrome浏览器支持
    <mark>文本高亮显示</mark>
    Internet Explorer 9+、Firefox、Opera、Chrome 和 Safari 支持
    <meter>定义度量衡</meter>
    只有Firefox、Opera、Chrome 和 Safari 6 支持 <meter> 标签，IE不支持
    <progress>定义下载进度</progress>
    IE 10+、Firefox、Opera、Chrome 和 Safari 6 支持
    <ruby>
    汉<rp>(</rp><rt>han</rt><rp>)</rp>
    子<rp>(</rp><rt>zi</rt><rp>)</rp>
    </ruby>
    IE 9+、Firefox、Opera、Chrome 和 Safari 支持 ruby\rp\rt 标签
    <time>9:00</time>
    chrome6.0/IE9+/firfox4.0/safiri5.0/opera11.1支持
    <datalist></datalist>
    IE 10、Firefox、Opera 和 Chrome 支持
    <canvas></canvas>
    IE 9、Firefox、Opera、Chrome 和 Safari 支持
    <figure>
        <img src='xxx.jpg'/>
        <figcaption>图像标题</figcaption>
    </figure>
    IE 9、Firefox、Opera、Chrome 和 Safari 支持
    <audio controls>
    <source src='sss.png'/>
    <source src='ddd.png'/>
    </audio>
    IE 9+、Firefox、Opera、Chrome 和 Safari 都支持
    <video></video>
    IE 9+、Firefox、Opera、Chrome 和 Safari 都支持
    <nav>大多数浏览器均支持</nav>
    <header></header>
    IE 9、Firefox、Opera、Chrome 和 Safari 支持
    <footer></footer>
    IE 9、Firefox、Opera、Chrome 和 Safari 支持
    <section></section>
    IE 9+、Firefox、Opera、Chrome 和 Safari
    <article></article>
    IE 9+、Firefox、Opera、Chrome 和 Safari 都支持
    <aside></aside>
    IE 9+、Firefox、Opera、Chrome 和 Safari 都支持
    <embed src='www.swf'/>
    所有主流浏览器都支持

对于html5新增的标签，大部分是IE9+、Firefox、Opera、Chrome 和 Safari 支持，还有少部分标签只有chrome和safari支持，如<summary></summary>/<dialog><dialog>/<details></details>/<dialog></dialog>/

那么解决html的兼容问题，主要是解决html5在主流浏览器上的兼容性。特别是在IE浏览器上的兼容性。经过长时间的实践，IE浏览器也有办法使其兼容html5标签。

//方法一:使用google的html5shiv包，将它引入放在<head></head>内部
<!--[if IE]>
<script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
<![endif]-->
//原理就是使html5标签成块状

//方法二：直接写js代码
<!--[if lt IE9]>    
<script>    
   (function() {   
     if (!    
     /*@cc_on!@*/  
     0) return;   
     var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');   
     var i= e.length;   
     while (i--){   
         document.createElement(e[i])   
     }    
})()    
</script>   
<![endif]--> 
注:@cc_on!@可以被ie识别并作为程序执行，同时启用ie的条件编译

如果ie6/7/8 禁用脚本的用户,那么可以参照facebook的做法，引导用户进入带有noscript标识的页面，用html4标签代替html5标签。当用户点击’查看这里’时,引导用户进入html4标签设计的网页

//方法三:
<!--[if lte IE 8]>    
<noscript>  
     <style>.html5-wrappers{display:none!important;}</style>  
     <div class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.   
     </div>  
</noscript>  
<![endif]-->

三、三者的兼容处理

css在各大浏览器上的兼容程度，可以查看css参考手册。
css中常用的一些属性和选择符大部分主流浏览器均支持，兼容程度到IE6+,也有少部分不常用的属性和选择器兼容性很差。
目前，对css3支持最好的是chrome,IE10已经能和Safari、Firefox、Opera 旗鼓相当了。
但是，在日常工作中，会遇到一些常见的兼容问题。
微软已经停止了对IE678的支持，那么我们在做兼容性的时候，制作兼容IE8+，firfox和chrome。对于IE678强制性地使其利用IE9引擎来渲染

    //解决IE789兼容问题:
    在IE9浏览器中，在控制台菜单中，常看到'浏览器模式'和'文档模式'，浏览器模式用于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件备注解析、发送给网站服务器的用户代理(User-Agent)字符串的值。网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版本和安装的功能，这样就可以向不同的浏览器返回不同的页面内容。默认情况下，IE8的浏览器模式为IE8。同理，IE9的浏览器模式是IE9。
    ‘文档模式’用于指定IE的页面排版引擎(trident)以哪个版本的方式来解析并渲染网页代码。切换文档模式会导致网页被刷新，但不会更改用户代理字符串中的版本号，也不会从服务器重新下载网页。切换浏览模式的同时，浏览器也会自动切换到相应的文档模式。
    //在head中，在除title外的其他meta之前使用
    <meta http-equiv='x-ua-compatible' content='IE=9'>
    此行代码表示使用IE9的文档模式，只能在低于IE9的浏览器版本中使用。
    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" >
    限定浏览器使用IE9浏览器模式向后台发送条件备注解析和用户代理字符串，以便后台根据浏览器相应网页。
    //方案2：低版本浏览器兼容html5和css3方案，
    兼容html5引入，引入html5shiv.min.js
    <!--[if lte IE 9]>
        <script src="JS/html5shiv.min.js"></script>
<![endif]-->
    兼容css3,引入selectivizr.js
    <!--[if lte IE 9]>
    <script src="JS/selectivizr.js"></script>
    <![endif]-->
    但是，需要注意几点:
    (1)与selectivizr.js同文件夹下需要放入PIE.htc，PIE_IE9.js，PIE_IE678.js，prefixfree.min.js文件;
    (2)样式不能是行内样式；
    (3)如果需要用到伪类的选择器，请在页面引用JQ、 MooTools文件等，不同的文件对选择器的支持程度不同。