前言

最近项目做完，用户需要兼容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;elsereturn false;return true;
}

八、IE9不支持flex布局

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

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

IE浏览器兼容性调整总结技巧相关推荐

浏览器兼容性调整（非原创）
浏览器的内核 Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( WebKit ) Go ...
PC/H5端各浏览器兼容性问题及解决方案？
概念:所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码解析的差异,造成页面显示效果不统一的情况. 1>不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情 ...
Edge浏览器兼容性设置，实用技巧，分享给你（2023新版）
Edge浏览器兼容性设置是一项非常重要且实用的功能技巧,可以帮助小伙伴更好地访问那些需要特定浏览器设置或版本的网站和应用程序.在本文中,小编将简要介绍如何使用Edge浏览器兼容性设置,以便各位小伙伴 ...
新版火狐浏览器怎么调整字体火狐浏览器字体调整技巧分享
相信有了解的朋友都清楚,官方在新版火狐浏览器中不仅优化了UI设计,还带来了一些细微的变化与改进.那么,新版火狐浏览器该怎么调整字体呢?下面小编就来分享一下火狐浏览器字体调整技巧,有需要的朋友可以稍作参 ...
最全整理浏览器兼容性问题与解决方案（转）
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...
web前端开发浏览器兼容性 - 持续更新
浏览器兼容性问题又被称为网页或网站兼容性问题:不同浏览器内核及所支持的html等网页语言标准不同,不同客户端环境(如分辨率不同)造成实际显示效果未能达到预期理想效果首先我们来看一下目前市面上常见的一 ...
常见浏览器兼容性问题大全
常见浏览器兼容性问题与解决方案所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或 ...
浏览器兼容性和HTTP状态了解
HTTP状态 100 Continue 初始的请求已经接受,客户应当继续发送请求的其余部分.(HTTP 1.1新) 101 Switching Protocols 服务器将遵从客户的请求转换到另外一种 ...
1.最全整理浏览器兼容性问题与解决方案
常见浏览器兼容性问题与解决方案所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或 ...

IE浏览器兼容性调整总结技巧

前言