兼容ie8及其以上IE浏览器，360浏览器，QQ浏览器等双核浏览器。

最近写页面的时候（只做PC端，有兼容），公司要求兼容IE8及其以上IE浏览器，firefox，和360，QQ等双核浏览器。由于之前没搞过兼容，所以，自己搞起来也是相当头疼。上网查了资料，有好使的，也有不好使的。为了方便以后查看，今天就记录下自己的心得。有不正之处，还请指教。

强制使用高版本内核渲染页面

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

• 首先，X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。上面代码告诉浏览器：对于IE8/9以上浏览器，用IE最新的Edge引擎渲染页面（当然了，前提是你电脑里装了Edge）。对于chrome=1来说，如果安装有chrome插件，则走插件。

<meta http-equiv="X-UA-Compatible" content="10"/>

• 强制页面使用IE10引擎渲染页面。

条件注释（css hack方法之一）

有人会试图使用<!–-[if!IE]>来定义非IE浏览器下的状况，但注意：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下非单不是执行该条件下的定义，而是当做注释视而不见。当然，根据条件注释只能在IE5+的环境之下

• <!--[if IE 8]>coding...<![endif]--> //ie8
  <!--[if lte IE 8]>coding...<![endif]--> //小于等于ie8
  <!--[if gte IE 8]>coding...<![endif]--> //大于等于ie8
  需要引入jq库的页面要注意，jq从2.0版本就不支持IE8了，最后一个支持IE8的是1.9。
  引入jq可如下这样引入：

    <script src="../jquery/jquery-3.3.1.js"></script>
    <!--[if IE 8]>
    <script src="../jquery/jquery.min.js"></script>
    <![endif]-->

说明：如果是IE8，则加载jquery.min.js，并且覆盖了前面的3.3.1。否则，只加载3.3.1。

使用meta标签针对360，QQ等双核浏览器

首先，这些浏览器都有2种浏览模式，兼容模式，极速模式。默认为极速模式。

• <meta name="renderer" content="webkit">
  此代码360 6.x以上可识别。强制浏览器使用Webkit内核渲染页面
• <meta name="force-rendering" content="webkit"/>
  其他双核浏览器识别。强制浏览器使用Webkit内核渲染页面

css书写时注意

1.选择器不要用CSS3的，如：.partner-pic:nth-child(1)。
2.颜色不要用rgba，用带#的。

title标签在IE8设置不了

网上查资料发现，title标签的innerText只读，不能设置。IE9以上可以。
解决办法：document.title = 值 ，该方法兼容火狐，谷歌。

css hack针对不同浏览器编写不同的代码

（这个我基本没有用到，仅做参考）
我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

• 类内属性前缀法
  属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。
• 选择器前缀法
  选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
  具体参考：https://blog.csdn.net/freshlover/article/details/12132801

另外，在填充盒子内容时

1.不要将高度定死了，高度应该由内容撑开，然后加个padding-bottom，不仅背景色可以渲染到，而且是可以与其它盒子隔开点距离。