前言

最近项目做完，用户需要兼容IE，于是开展了兼容性的调整工作。边调整边想感叹IE真是个沙雕。。特将我遇到的问题记录下来，以及记录我的解决办法，以下问题及解决办法，都是真实可用的，本人亲测~~

一、IE浏览器下，没有达到出现滚动条的条件，但是出现了滚动块的问题

滚动块就是个灰色的方形，滚动条的两边。出现这种情况，一般是你的某个css文件，将哪个地方的overflow设置成了scroll，所以强行出现。改为overflow-y：auto即可。

二、IE浏览器下引入的样式不生效，其他浏览器正常

这个问题是因为IE浏览器对引入的资源做了限制。限制规则总结一下：

1、文档中只有前31个link或style标记关联的CSS能够应用。

2、一个style标记只有前31次@import指令有效应用。
3、一个css文件只有前31次@import指令有效应用。
4、@import最多可支持4个级别。
5、一个css文件最多4095条规则。
在网上看了一下原理，是因为IE9使用32位整数来进行标识，排序和应用级联规则。整数的32位被分成5个字段，四个5位的sheetId和一个12位的ruleId。5位sheetID导致31 @import限制，12位ruleID导致4095规则每张限制。
一般来说，这种限制大多数时候都会满足，可能说开发框架引入了大量的冗余css，这种可以将页面需要的css提前，将页面不需要的css往后放。也可以采用css合并压缩机制。

三、强制ie以最新的版本模式对页面进行渲染

介绍一行代码

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

X-UA-Compatible是IE8的一个专有<meta>属性，它告诉IE8采用何种IE版本去渲染网页，在html的<head>标签中使用。

Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。

简单的说，就是什么版本 IE 就用什么版本的标准模式渲染。

chrome=1 这个并不是IE模拟chrome，而是谷歌自己做的一个外挂：Google Chrome Frame(谷歌内嵌浏览器框架GCF)。这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器

要使用chrome=1，要安装GCF，并且指定页面使用chrome内核来渲染。

参考文章链接：

https://blog.csdn.net/MEdwardM/article/details/52984648

https://www.cnblogs.com/chendc/p/5423337.html

四、IE下get请求报错：java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986

这种问题是因为get连接提交的参数中包含了特殊符号或中文字符。造成浏览器不认识，没有进行转义。
这种解决办法可以调用encodeURI函数来对提交的变量进行一次转义。或者使用post提交的方式。
 

五、IE下不设置背景颜色

对于背景颜色透明，我们使用了background:unset来进行设置，但是发现IE浏览器不生效，IE9不支持unset属性。于是我们可以使用transparent属性。

六、IE下inout框中内容显示不全，点击时晃动

基本是padding的问题，有可能是别的css冲突导致，可自行设置 加上important来提升优先级。

七、IE9不支持startwith与endswith函数

这种方式可以用substring函数来模拟使用。也可以自己重写一个函数来进行使用。
自己实现的函数如下：
String.prototype.startWith = function(s) {

 if (s == null || s == "" || this.length == 0 || s.length > this.length)

 return false;

 if (this.substr(0, s.length) == s)

 return true;

 else

 return false;

 return true;

}

String.prototype.endWith = function(s) {

     if (s == null || s == "" || this.length == 0|| s.length > this.length)

          return false;

     if (this.substring(this.length - s.length) == s)

          return true;

     else

          return false;

    return true;

}

八、IE9不支持flex布局

现在使用flex布局较多。可以实现互相之间的宽度互补。但是IE并不支持。

于是两个div的情况下，使用display:inline-block与float配合使用。同时需要对宽度来进行定义。

IE浏览器兼容性调整总结技巧的更多相关文章

  1. sass进阶—mixin的使用（浏览器兼容性调整）

    @mixin content($color:red,$fontSize:14px){ color:$color; font-size: $fontSize;} /*调用含参数的mixin,使用更加灵活 ...

  2. PC/H5端各浏览器兼容性问题及解决方案？

    概念:所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码解析的差异,造成页面显示效果不统一的情况. 1>不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况 ...

  3. web前端开发浏览器兼容性 - 持续更新

    浏览器兼容性问题又被称为网页或网站兼容性问题:不同浏览器内核及所支持的html等网页语言标准不同,不同客户端环境(如分辨率不同)造成实际显示效果未能达到预期理想效果 首先我们来看一下目前市面上常见的一 ...

  4. 浏览器兼容性之Css篇

    本文与上一篇随笔<浏览器兼容性之Javascript篇>有一定关联,下来我会继续不断总结,旨在解决浏览器兼容性,对遇到类似问题的同仁有所帮助,如有更多解决浏览器兼容性的案例还望大家分享一起 ...

  5. 【转】CSS浏览器兼容性与解析问题终极归纳

    1.怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式.为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯. 2.IE6双边距问题:在 ...

  6. 【web前端开发】浏览器兼容性处理

    1.居中问题div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto;2.高度问题两上下排列或嵌套的div,上面的div设置高度(height),如果div里的 ...

  7. jQuery1.11源码分析(3)-----Sizzle源码中的浏览器兼容性检测和处理[原创]

    上一章讲了正则表达式,这一章继续我们的前菜,浏览器兼容性处理. 先介绍一个简单的沙盒测试函数. /** * Support testing using an element * @param {Fun ...

  8. HTML`CSS_网站页面不同浏览器兼容性问题解决

    目前,最为流行的浏览器共有五个:分别是ie,Edge浏览器(属于微软),火狐,谷歌(chrome)Safari和Opera五大浏览器. Trident内核:IE ,360,,猎豹,百度: Gecko内 ...

  9. 浏览器兼容性-JS篇

    总结一下平时遇到的浏览器兼容性问题,本篇关于JS. 1.事件绑定 兼容写法: function add(obj,event){ if (obj.addEventListener) { obj.addE ...

随机推荐

  1. C++—程序的内存分区

    代码区 ​ 程序被操作系统加载到内存时,所有可执行的代码被加载到代码区,也叫代码段,存储程序的代码指令.程序运行时,这段区域数据不可被修改只可以被执行. 静态区 ​ 程序中的静态变量.全局变量存放在此 ...

  2. Spring Boot 系列 - WebSocket 简单使用

    在实现消息推送的项目中往往需要WebSocket,以下简单讲解在Spring boot 中使用 WebSocket. 1.pom.xml 中引入 spring-boot-starter-websock ...

  3. linux 命令 — 文件相关

    使用文件相关命令 dd 用来生成任意大小的文件 dd if=/dev/zero of=junk.data bs=1m count=1 生成一个1m大小的文件,里面全部使用0填充 if: 指定输入文件, ...

  4. 记一次安装Ipython的流程

    这是一个悲伤的安装ipython的过程. 写下来留个教训吧. 也是希望对博友一些帮助吧. 注: 我也写了一篇window下安装bpython的文章(个人感觉bpython要比ipython强大的多), ...

  5. spring-boot-2.0.3之quartz集成，数据源问题，源码探究

    前言 开心一刻 着火了,他报警说:119吗,我家发生火灾了. 119问:在哪里? 他说:在我家. 119问:具体点. 他说:在我家的厨房里. 119问:我说你现在的位置. 他说:我趴在桌子底下. 11 ...

  6. python的Web框架，Django自定义过滤器及标签

    代码布局 有的时候框架给的过滤器不够用,需要自定义一些过滤器,所以就需要我们自己来定义一些过滤器等 自定义代码放置的路径 某个app特用(独有)的 - app 目录下的 templatetags文件夹 ...

  7. 华为路由器帧中继 FR 实验

    帧中继简介 帧中继( Frame Relay)是一种用于连接计算机系统的面向分组的通信方法.它主要用在公共或专用网上的局域网互联以及广域网连接.大多数公共电信局都提供帧中继服务,把它作为建立高性能的虚 ...

  8. JavaScript 系列博客（一）

    JavaScript 系列博客(一) 前言 本系列博客为记录学习 JavaScript 的学习笔记,会从基础开始慢慢探索 js.今天的学习笔记主要为 js 引入.定义变量以及 JavaScript 中 ...

  9. OKR20180607

    OKR---目标与关键成果法 一套明确和跟踪目标及其完成情况的管理工具和方法 OKR的主要目标是明确公司和团队的“目标”以及每个目标达成的可衡量的“关键结果”. “目标”是设定一个定性的时间目标.“关 ...

  10. C# Winform开发以及控件开发的需要注意的，被人问怕了，都是基础常识

    我是搞控件开发的,经常被人问,所以把一些问题记录了下来!如果有人再问,直接把地址丢给他看. 一. 经常会有人抱怨Winform界面闪烁,下面有几个方法可以尽可能的避免出现闪烁 1.控件的使用尽量以纯色 ...