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

前端开发 作者: 2024-08-19 19:25:01
前言 最近项目做完,用户需要兼容IE,于是开展了兼容性的调整工作。边调整边想感叹IE真是个沙雕。。特将我遇到的问题记录下来,以及记录我的解决办法,以下问题及解决办法,都是真实可用的,本人亲测~~ 一、

前言

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

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

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">

四、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) 
 true;
 else 
 ; 
}

String.prototype.endWith = function(s) {
     this.length == 0|| s.length > .length)
          ;
     this.substring(this.length - s.length) == s)
          else
          ;
    ;
}

八、IE9不支持flex布局

总结

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65103.html