IE8 + JQuery1.12.4 兼容之旅

公司的产品大部分的用户可能还在使用IE8，无奈兼容IE8重构中，其实对于兼容IE8没有太多的抗拒，这么久了网上关于如何兼容IE的资料比较多，整体看来没有什么特别大的坑。

起手式

如果需要兼容IE8，那就应该放弃绝大多数的现代javascript框架，使用HTML+ajax的方式或服务端模板渲染引擎开发，这样可以减少很多的问题，推荐使用下面的配置：

• jquery-1.12.4.min.js (用于ajax请求，DOM操作及事件监听，一定要使用2.0以下的版本)
• bootstrap3.3.7（用于系统中美观度要求较高，需要定制开发的页面）
• layUI2.5.6（用于系统中无需设计的功能页面的开发）
• echarts3.8.4 注意使用定制版本，勾选兼容IE8，即使这样，在IE8下某些图标仍会丢失部分样式。
• 阿里图标库

其他的内容就靠自己手写啦！

使用html或服务端模板渲染，会带来代码结构的问题，建议可采用iframe的形式加载新的页面。

IE8 兼容bootstrap自适应及栅格布局

这个相对比较简单，只要在html body标签下添加以下内容：

  <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
  <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

清除IE下滚动条

.menu-list-container {
  width: 250px;
  height: 100%;
  overflow-y: auto;
  float: left;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

.menu-list-container::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}

这里需要注意下IE8的滚动条隐藏比较麻烦，需要用div嵌套遮挡的方式，感觉没有必要，故IE8下这个解决方案是有问题的

清除iframe标签边框

iframe 最好采用absolute布局，避免因为iframe边框的宽度撑开父级容器，从而导致页面在IE浏览器中发生意料之外的滚动，可参考一下布局：

.detail-container {
  height: 100%;
  margin-left: 500px;
  background-color: #edf6fd;
  position: relative;
}

.detail-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}

清除IE8下的iframe边框需要额外为iframe标签添加如下属性：

<iframe frameborder="0"></iframe>

IE8下常见的不兼容样式

• 不支持 border-radius
• 不支持div折角效果

还在苦苦寻找面试题，来码叔刷面试题吧！又快又省心！微信扫描下发小程序码，即可刷刷刷！