前言

最近项目做完，用户需要兼容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. SaltStack安装配置详解

    一.简介 Saltstack 比 Puppet 出来晚几年,是基于Python 开发的,也是基于 C/S 架构,服务端 master 和客户端 minions :Saltstack 和 Puppet ...

  2. 痞子衡嵌入式：备受开源社区推崇的分布式版本控制工具(Git)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是分布式版本控制工具Git. 1.为什么需要版本控制系统? 单人软件项目开发过程,往往很多功能都是逐步增加的,在代码开发过程中,有的时候功 ...

  3. 给HTML页面指定元素添加属性，添加父元素

    给HTML页面指定元素添加属性,添加父元素 下面拿一个给富文本中所有的图片增加layer弹窗效果. 思路: 给富文本父元素设置属性. 获取父元素里所有的img   此处用到querySelectorA ...

  4. 翻译：DECLARE Variable（已提交到MariaDB官方手册）

    本文为mariadb官方手册:DECLARE Variable的译文. 原文:https://mariadb.com/kb/en/library/declare-variable/我提交到MariaD ...

  5. Jenkins+Git+Gitlab+Ansible实现持续集成自动化部署动态网站（二）--技术流ken

    项目前言 在上一篇博客<Jenkins+Git+Gitlab+Ansible实现持续化集成一键部署静态网站(一)--技术流ken>中已经详细讲解了如何使用这四个工具来持续集成自动化部署一个 ...

  6. fiddler抓取https请求（android/ios）

    本文转载自:http://blog.csdn.net/songer_xing/article/details/53841401 备注:本人有这样的一个需求,先记录下,以后再进行整理. 在抓包过程中发现 ...

  7. mysql+ssl主从复制

    一.作为主服务器Master, 会把自己的每一次改动都记录到 二进制日志 Binarylog 中. (从服务器I/O thread会负责来读取master binary log, 然后写入自身rela ...

  8. .NET MVC JSON JavaScriptSerializer 字符串的长度超过 maxJsonLength 值问题的解决

    [ArgumentException: 使用 JSON JavaScriptSerializer 序列化或还原序列化期间发生错误.字符串的长度超过在 maxJsonLength 属性上设定的值. 参数 ...

  9. C#窗体越界时鼠标还能回到初始坐标位置

    对窗体加越界限制后,鼠标拖动窗体越界时,窗体不能动,鼠标位置可动,但窗体不再越界时,鼠标位置还能回到鼠标按下时相对窗体的坐标:1.首先创建一个窗体Form1,然后在窗体上拖一个button1按钮(主要 ...

  10. 先装IIS后装.Net Framework

    1.动态页面和静态页面的区别 动态页面(动态网站):通过C#代码(或别的语言)与服务器的交互的实现(比如新建一个ashx一般处理程序中的C#代码就可以和服务器实现交互,修改数据库,上传图片等都属于和服 ...