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

编程之家收集整理的这篇文章主要介绍了IE浏览器兼容性调整总结技巧编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

最近项目做完,用户需要兼容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) 
 true;
 else 
 ; 
}

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

八、IE9不支持flex布局

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

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

总结

以上是编程之家为你收集整理的IE浏览器兼容性调整总结技巧全部内容,希望文章能够帮你解决IE浏览器兼容性调整总结技巧所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群:1065694478(已满)
编程之家官方2群:163560250(已满)
编程之家官方3群:312128206(已满)
编程之家官方4群:230427597

相关文章

猜你在找的CSS相关文章

原理 创建两个div嵌套在一起 外层的div设置固定宽度和overflow:scroll 滚动条的宽度=外层div的offsetWidth-内层div的offsetWidth 实现代码 /** * 获
设置滚动条样式 /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; /*对垂直流动条有效*/ height: 10px;
前言 有些属性不是很常用,但是工作中遇到了,记录一下,方便学习。 1、text-indent text-indent 属性规定文本块中首行文本的缩进。主要实现就像word那种首行缩进的效果。 详解ht
前言 政府网站会遇到公祭日的时候,网站整体颜色变灰的情况。今天正好调了一下。在此把解决方案分享给大家。方案简单实用,笔者已在生产环境使用过。通过整体的html使用filter来进行过滤。如下,只要引入
html代码 css代码 效果图
在一些界面上 , 如果每个icon都去找图片还是相当麻烦的 , 直接使用css画出icon就方便的多了 , 下面两个是画的文件夹和话筒的icon 效果: 文件夹: .folderBtn { displ
最近工作有一个需求是将一个界面改为响应式布局,由于UI还没有给设计,于是自己先查了一下资料做了一个demo。其实实现响应式布局的方式有很多,利用media实现就是其中一种,但是他也有一些缺点,比如说要
因为项目需要,别人想让我给他写一个个人博客,并且给了我一个其他人的网页,可以点此查看。有的同学可能说了,第三方博客框架这么多,为什么还要去手写的,你说这个有可能是没有看到打开这个博客。 样式介绍 给大