项目兼容ie8技术要点
好久没有写博客了,因为最近公司项目要调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,解决了这个问题
- iframe {
- width: 100%;
- height:100%;
- display: block;
- position: absolute;
- }
5.弹性布局问题
由于之前没有考虑ie8,使用了大量的弹性布局,这回可惨了,没有简单办法,只能重写。
弹性布局新老版本共三种,最新的display:flex;兼容ie 10+;过渡版本和老版本(box)都不兼容ie8.。。所以放弃吧,重新写布局好了。虽然弹性布局好用,但做项目一定要慎用flex
6.做项目遇见的最大的坑,这个坑不愿别人,自己挖的自己跳。<哭泣>
所有的都设置好了,页面就只有一小条,找了好久才找到问题。之前写代码马虎,<nav>少些了一半。智能伟大的谷歌没问题,到ie8这就惨了,就是不显示。找了好久,所以,写代码一定要认真些啦。
7.CSS3
CSS3的新属性和新选择器ie8是不支持的,解决办法换选择器呗,不行就给个id/class啥的,新属性不支持查资料说是引入PIE.htc的一个包,这个包有坑,我就没有使用。能用滤镜的就用的滤镜。用不了的就选择优雅降级啦。
8.CSS hack
还有最有一点,就是一定不要修改原文件代码,将所有新的需要给ie单独写的代码写到新文件中,然后通过头部注释引用
转自:https://blog.csdn.net/qq_38627581/article/details/75268088
项目兼容ie8技术要点的更多相关文章
- 【转】vue项目重构技术要点和总结
vue数据更新, 视图未更新 这个问题我们经常会遇到,一般是vue数据赋值的时候,vue数据变化了,但是视图没有更新.这个不算是项目重构的技术要点,也和大家分享一下vue2.0通常的解决方案吧! 解决 ...
- jQuery validate兼容IE8写法
最近做项目的时候遇到一个validate插件在IE8下面点击submit按钮没有执行检查的BUG 在chrome和FF,还有IE9以上都可以.百度了好多文章都没有找到解决方法,后面自己测试找到了问题. ...
- 【转】让Bootstrap 3兼容IE8浏览器
FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个 ...
- 让Bootstrap 3兼容IE8浏览器
最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...
- Bootstrap 3兼容IE8浏览器(转)
Bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑,手机上都得到非常优秀的布局体验.这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分 ...
- Bootstrap 3 兼容 IE8 浏览器
公司新上的项目,前端用的Bootstrap3的框架,但它已经放弃对IE9下的支持了.可IE8还是有着许多用户,不能不照顾到他们,IE7以下的,我只想说,现在什么年代了,要解放思想,与时俱进啊,就不能动 ...
- 使用FlashWavRecorder实现浏览器录制wav音频和上传音频文件,兼容IE8以上浏览器
前言:本项目基于github开源插件实现,该插件使用flash实现,兼容IE8以上浏览器 感谢michalstocki的分享该项目,github项目地址:https://github.com/mich ...
- css3兼容IE8的方案 各个ie的hack
虽然现在很多项目已经对低版本IE不要求了,但是还有部分公司对IE8还是很执着的,咱作为屌丝前端程序员不能和老板说前端潮流,不能说趋势,只能动脑子了,下面就分享一些css3兼容ie8的方案思路.主要是实 ...
- Excel阅读模式/单元格行列指示/聚光灯开发 技术要点再分享
1. 引言 文题中所谓技术要点再分享,本意是想在大神Charltsing Liu的博文“简单介绍Excel单元格行列指示的实现原理(俗称聚光灯功能)”的基础上写一点个人开发体会.写本文的初衷有三点,一 ...
随机推荐
- Apache Kafka Producer For Beginners
在我们上一篇Kafka教程中,我们讨论了Kafka Cluster.今天,我们将通过示例讨论Kafka Producer.此外,我们将看到KafkaProducer API和Producer API. ...
- quartz2.3.0(一)您的第一个Quartz程序
任务类 package org.quartz.examples.example1; import java.util.Date; import org.slf4j.Logger; import org ...
- go 缓冲IO
package main import ( "bufio" "fmt" "os" "strings" ) func ma ...
- Centos7 在线安装开发环境 jdk1.8+mysql+tomcat
写在最前 刚刚开始接触Linux,并折腾着在服务器上部署自己的项目,当然作为一个后端开发人员,必不可少的东西肯定是 JDK Mysql Tomcat容器 每天记录一天,每天进步一点点~~ 1.更新系统 ...
- C# vb .net实现消除红眼效果
在.net中,如何简单快捷地实现Photoshop滤镜组中的消除红眼效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...
- Windows系统中环境变量不展开的问题
Windows系统中环境变量不展开的问题 问题现象:Windows.System32等系统目录里命令,无法通过Path搜索路径来执行.查看Path环境变量结果如下: D:\>echo %Path ...
- tp框架防止表单重复提交
转载 框架官方 http://www.thinkphp.cn/topic/9090.html 第三方 https://my.oschina.net/caomenglong/blog/728908
- PHP 常用数据库操作
1.建立与数据库服务器的连接(前提数据库服务器必须打开) 第一个参数:本地地址 第二个参数:数据库账户 第三个参数:数据库密码 第四个参数:数据库名称 $connection = mysqli_con ...
- C# 利用特性(Attribute)实现通用实体类数据合法校验
用过asp.net mvc 的都应该知道,在实体类上添加一些特性,可以实现后端实体的数据校验,这里简单实现一下 实现原理:利用反射获取实体的每一个属性,并通过属性获取属性上标注的特性,调用特性的Val ...
- robot framework笔记(三):扩展SeleniumLibrary库 (自定义关键字)
(一)自定义和浏览器相关的关键字 以下代码GitHub 版本库地址: https://github.com/blairwind/blog_rf SeleniumLibrary的扩展文档中提供了3种增加 ...