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折角效果

还在苦苦寻找面试题,来码叔刷面试题吧!又快又省心!微信扫描下发小程序码,即可刷刷刷!
在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: jquery 是一款流行的 JavaScript 库,它极大的简化了前端开发的流程。jquery1.12.4 是 jquery 最后一个支持 Internet Explorer 6/7/8 浏览器的版本。由于 Internet Explorer 对于 JavaScript 的支持度远不如其他现代浏览器,因此如果您需要兼容老旧的浏览器,那么 jquery1.12.4 是非常适合您的选择。 jquery1.12.4 提供了很多功能,比如 DOM 操作、事件处理、Ajax 网络请求和动画特效等等。通过使用 jquery1.12.4,您可以非常方便的在浏览器端实现各种效果。 如果您想下载 jquery1.12.4,可以在 jquery 官网 http://jquery.com/ 上找到下载链接。jquery1.12.4 的下载包括两个版本,一个是压缩版 minified,一个是未压缩版 not-minified。未压缩版适合调试代码,可以看到更详细的错误信息,但是体积较大,加载速度较慢。压缩版则可以让您的页面加载速度更快。 总之,如果您需要兼容老旧的浏览器,我们强烈推荐您下载 jquery1.12.4。它不仅提供了丰富的功能,而且可以让您的开发变得更加简单和快速。 ### 回答2: 要下载 jQuery 1.12.4 版本,你可以按照以下步骤进行操作: 1. 打开任意一个浏览器(如谷歌浏览器、火狐浏览器等)。 2. 在浏览器的地址栏中输入 "https://jquery.com/download/" 并按下回车键,打开 jQuery 官方网站的下载页面。 3. 在页面中找到一个标有 "Download the compressed, production jQuery 1.12.4" 的按钮,点击它。 4. 此时会弹出一个小窗口,选择 "Save File" 选项并点击 "OK",开始下载 jQuery 1.12.4 版本。 5. 下载完成后,打开下载文件所在的文件夹,你会找到一个名为 "jquery-1.12.4.min.js" 的文件,这就是 jQuery 1.12.4 版本的文件。 如果你是使用 npm 进行项目管理,你也可以通过运行以下命令来下载 jQuery 1.12.4 版本: ``` npm install jquery@1.12.4 ``` 这个命令将会从 npm 的仓库中下载并安装 jQuery 1.12.4 版本,你可以在你的项目中使用它。 无论你选择哪种方式,下载完成后,你就可以在你的项目中引入这个 jQuery 文件,并开始使用其中的功能了。 ### 回答3: 对于jquery1.12.4的下载,可以通过以下几种方式进行: 1. 官方网站:可以直接访问jquery的官方网站(https://jquery.com/),在网站首页的"Download"页面中可以找到各个版本的jquery文件。在该页面中,选择"1.x versions"选项卡,然后在该选项卡中可以找到并下载jquery1.12.4的文件。 2. CDN:可以通过使用CDN(内容分发网络)来下载jquery1.12.4文件。CDN是一种全球范围的服务器网络,可以提供可靠的文件分发服务。在HTML文件中,可以通过在<head>标签中插入以下代码来加载jquery1.12.4: ```html <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> ``` 该代码会从CDN中加载并引入jquery1.12.4文件。 3. Github:jquery的开源代码可在Github上获取。可以通过访问jquery的Github页面(https://github.com/jquery/jquery/releases),在该页面找到release版本,然后下载jquery1.12.4的源代码或压缩文件。 总结起来,要下载jquery1.12.4,可以从其官方网站、CDN或Github上获取。官方网站提供了特定版本的下载选项,CDN则提供了快速加载的引用代码,而Github则提供了源代码和已压缩的文件供下载。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值