前言
最近项目做完, 用户需要兼容 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://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 配合使用. 同时需要对宽度来进行定义.
来源: https://www.cnblogs.com/jichi/p/10252927.html