好久没有写博客了，因为最近公司项目要调ie8兼容，一直在忙这事，终于竣工了，跟大家分享下这老掉牙的浏览器是如何搞定的。。。本人新手一枚，欢迎大家指教

项目是使用的jeecg框架，后台使用的java,前端页面使用了bootStrap,jquery,easyui框架，页面是jsp+less+js，还用到了好多html5的新标记以及CSS3的新属性以及媒体查询。由于当时做项目时没有考虑ie8，所以改的过程中遇到了好多好多问题。刚拿到项目时谷歌运行没有问题，ie8一片惨白，不光没有样式，连字都没有。。。没有最惨只有更惨。不说废话了，上干货

1.jquery

项目之前所用的jquery为2.1.4版本，不兼容ie8(jquery2.0+都不兼容ie8)，将所有页面jquery均换成1.10.2版本。

2.bootstrap

项目所使用的bootstrap是3.3.4版本的，为了兼容ie8做了如下设置

a.将jsp页面加上了<!DOCTYPE html>

b.设置元标签

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

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

c.使用reponse.js使得支持媒体查询

d.使用html5shiv.min.js使ie8支持html5新特性，注意：使用这个js后所有的html5新结构标记均变为行内元素，需要手动设置display:block;

这样设置后不仅支持了bootstrap还使得ie8兼容html5和媒体查询。

3.less

之前使用的less是直接引入的less文件，并且引入less.js进行编译。但是less.js在ie8不能用，会报错。所以还是稳妥点，直接使用的css文件。我是通过在线less转css编译器转的。

这样基本样式就差不多都出来了。

4.iframe

这个iframe之前给的height是百分比，但是ie8不支持iframe的高为百分比的写法。网上推荐了好多js设置高度的方法，我闲麻烦，写了个CSS,解决了这个问题

  1. iframe {
  2. width: 100%;
  3. height:100%;
  4. display: block;
  5. position: absolute;
  6. }

5.弹性布局问题

由于之前没有考虑ie8，使用了大量的弹性布局，这回可惨了，没有简单办法，只能重写。

弹性布局新老版本共三种，最新的display:flex;兼容ie 10+；过渡版本和老版本(box)都不兼容ie8.。。所以放弃吧，重新写布局好了。虽然弹性布局好用，但做项目一定要慎用flex

6.做项目遇见的最大的坑，这个坑不愿别人，自己挖的自己跳。<哭泣>

所有的都设置好了，页面就只有一小条，找了好久才找到问题。之前写代码马虎，<nav>少些了一半。智能伟大的谷歌没问题，到ie8这就惨了，就是不显示。找了好久，所以，写代码一定要认真些啦。

7.CSS3

CSS3的新属性和新选择器ie8是不支持的，解决办法换选择器呗，不行就给个id/class啥的，新属性不支持查资料说是引入PIE.htc的一个包，这个包有坑，我就没有使用。能用滤镜的就用的滤镜。用不了的就选择优雅降级啦。

8.CSS hack

还有最有一点，就是一定不要修改原文件代码，将所有新的需要给ie单独写的代码写到新文件中，然后通过头部注释引用

<!--[if lte IE 8]>
<![endif]-->
用到的差不多就这么多了，想到了我会继续补充的。

转自：https://blog.csdn.net/qq_38627581/article/details/75268088

项目兼容ie8技术要点的更多相关文章

  1. 【转】vue项目重构技术要点和总结

    vue数据更新, 视图未更新 这个问题我们经常会遇到,一般是vue数据赋值的时候,vue数据变化了,但是视图没有更新.这个不算是项目重构的技术要点,也和大家分享一下vue2.0通常的解决方案吧! 解决 ...

  2. jQuery validate兼容IE8写法

    最近做项目的时候遇到一个validate插件在IE8下面点击submit按钮没有执行检查的BUG 在chrome和FF,还有IE9以上都可以.百度了好多文章都没有找到解决方法,后面自己测试找到了问题. ...

  3. 【转】让Bootstrap 3兼容IE8浏览器

    FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个 ...

  4. 让Bootstrap 3兼容IE8浏览器

    最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...

  5. Bootstrap 3兼容IE8浏览器（转）

    Bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑,手机上都得到非常优秀的布局体验.这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分 ...

  6. Bootstrap 3 兼容 IE8 浏览器

    公司新上的项目,前端用的Bootstrap3的框架,但它已经放弃对IE9下的支持了.可IE8还是有着许多用户,不能不照顾到他们,IE7以下的,我只想说,现在什么年代了,要解放思想,与时俱进啊,就不能动 ...

  7. 使用FlashWavRecorder实现浏览器录制wav音频和上传音频文件，兼容IE8以上浏览器

    前言:本项目基于github开源插件实现,该插件使用flash实现,兼容IE8以上浏览器 感谢michalstocki的分享该项目,github项目地址:https://github.com/mich ...

  8. css3兼容IE8的方案 各个ie的hack

    虽然现在很多项目已经对低版本IE不要求了,但是还有部分公司对IE8还是很执着的,咱作为屌丝前端程序员不能和老板说前端潮流,不能说趋势,只能动脑子了,下面就分享一些css3兼容ie8的方案思路.主要是实 ...

  9. Excel阅读模式/单元格行列指示/聚光灯开发 技术要点再分享

    1. 引言 文题中所谓技术要点再分享,本意是想在大神Charltsing Liu的博文“简单介绍Excel单元格行列指示的实现原理(俗称聚光灯功能)”的基础上写一点个人开发体会.写本文的初衷有三点,一 ...

随机推荐

  1. 前端 html篇

    web开发本质: html是一个标准,规定了大家怎么写网页 1.浏览器输入网址回车发生了什么事 1. 浏览器 给服务端 发送了一个消息2. 服务端拿到消息3. 服务端返回消息4. 浏览器展示页面 se ...

  2. flask框架（一）——初识Flask

    一.初识flask 1.什么是Flask:Flask是一个python编写的web框架,只是一个内核,默认依赖2个外部库:jinja2模板引擎和WSGI工具集--Werkzeug. 2.安装flask ...

  3. appium1.6在mac上环境搭建启动ios模拟器上Safari浏览器 转自：上海-悠悠

    前言 在mac上搭建appium踩了不少坑,先是版本低了,启动后无限重启模拟器.后来全部升级最新版本,就稳稳的了. 环境准备: 1.OS版本号10.12 2.xcode版本号8.3.2 3.appiu ...

  4. JAVA的枚举基本操作，对原码反码补码的理解及为运算的深入理解，浮点数计算的误差分析

    ①深入浅出的了解枚举类型 先看一段代码: enum Size{SMALL,MEDIUM,LARGE}; public class EnumTest { public static void main( ...

  5. 自建Git服务Gogs和CI/CD服务Drone

    自建Git服务Gogs和CI/CD服务Drone 项目:https://gogs.io Gogs运行 docker run -d --name=gogs -p 10022:22 -p 10088:30 ...

  6. VS2019删除大量空白行或者缩进大量空白行

    原文:VS2019删除大量空白行或者缩进大量空白行 问题描述: 在vs编辑器的代码中有时含有大量无用的空白行,我们想删除这些大量空白行或者缩进空白行. 注: 不需要将代码复制在类似word的文本编辑器 ...

  7. netcore 版本升级 导致的cookie验证失败

    排查了两天的问题,本来都是运行正常的cookie验证,突然不好用了,服务器获取不到cookie信息. 我确实是升级了.netcore sdk,之前是2.2.102,后来升级成了2.2.107,一开始并 ...

  8. HTML Marquee跑马灯

    Marquee是html的标签,所有的主流浏览器都能兼容,用于创建文字滚动. 来介绍下标签的属性 滚动方向 direction <!--滚动方向 direction 4个值 up down le ...

  9. Jmeter学习笔记（七）——监听器元件之察看结果树

    在jmeter中,如果我们需要查看请求结果就需要添加查看结果树,这个监听器元件有那些功能呢? 一.察看结果树界面如下 二.察看结果树界面功能说明 1.所有数据写入文件 (1)文件名:可以通过浏览,选择 ...

  10. python 3.7.4 安装 opencv

    明确一下,我们需要使用python来调用opencv中的库函数,所以需要安装opencv-python. 主要需要安装: 1. opencv-python 2. numpy 第一步先来安装opencv ...