IE Broswer、Modern Broswer 兼容性问题

JyLie 2017-01-01 ie兼容性

持续更新...

本文主要总结 IE 相关的兼容性问题，附加现代浏览器兼容

# IE 兼容性问题

# 运行页面白屏

IE 白屏一般是页面报错引起的，大部分情况是兼容性问题。

对于此类问题，先搞个常规排查添加 polyfill 尝试，再来个 babel 将代码编译为 es5，如果仍然报错则需要调试报错源处写法问题。

# 报错 "TypeError: 调用的对象无效

出现调用的对象无效，是因为引用了 IE window 上不存在的对象或函数引起的。

ie 不支持 es6|es6+的结构类型、函数、对象以及表达式，因此使用时要考虑 polyfill 进行支持，否则会报错。

在自己写兼容 polyfill 时要注册 DOM 和 js 相关的结构性、调用方式问题，赋值类型也要注意。如在 IE11 下判断不存在的函数方法时会报错（不要写!requestAnimationFrame，而要写!window.requestAnimationFrame）

# JS

# BOM

# Event

冒泡事件，ie 默认接受冒泡事件 if ( e && e.stopPropagation ) {e.stopPropagation(); } else {window.event.cancelBubble = true;}
ie10+开始支持 FormData ，且只支持 formData.append(name, value, filename)
ie 下 input 框的 change 事件不能用 enter 键触发，只能用键盘捕捉事件，判断键值是否等于'13'

function getIsIE() {
    if (!!window["ActiveXObject"] || "ActiveXObject" in window) return true;
    else return false;
}
  // 获取回车键事件 -- 兼容ie
 const getEnterEvent = getEnterEvent(e)=> {
     //判断是否是ie浏览器
     if(getIsIE()) {
      if(e.keyCode == 13){
          //注意判断值没有发生变化时不做修改

     }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# DOM

# input element

IE 下 input 框设置了 readonly 属性，鼠标还是可以点击光标聚焦，因此需要采用 disabled 属性替换使用

# a element

a 标签尽量不要在 href 使用javascript:;协议，因为其不仅会导致不必要的触发 window.onbeforeunload 事件，而且在 IE8 中会出现跳转出错的问题。

如果就是喜欢使用 javascript:; 则使用javascript:void(0); 替代。

替代方案：

<a href="javascript:void(0);"></a>
<!-- 或者 -->
<a href="#" onclick="return false"></a>

1
2
3

# css

# 盒子模型

解决 ie 和 modern brower 的盒子模型差异：* {box-sizing: content-box;-moz-box-sizing: inherit;-webkit-box-sizing:inherit;}

# flex 布局

ie11 使用 flex 时，使用 min-height 会导致垂直居中失效，min-width 同理。

# 文本换行

一行样式：white-space: nowrap ：nowrap 不生效时，添加 word-break: keep-all

# IE6 双边距

块属性标签添加了浮动 float 之后，若在浮动方向上也有 margin 值，则 margin 值会加倍。其实这种问题主要就是会把某些元素挤到了第二行

解决的方式有两个：

1.给 float 元素添加 display：inline 即可正常显示
2.就是 hack 处理了，对 IE6 进行 _margin-left:5px;

<style type="text/css">
  html,
  body,
  div {
    margin: 0;
    padding: 0;
  }
  .wrap {
    width: 200px;
    height: 200px;
    border: 1px solid #333;
  }
  .box {
    float: left;
    display: inline;
    margin-left: 10px;
    width: 80px;
    height: 80px;
    background-color: green;
  }
</style>

<body>
  <div class="wrap">
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <script type="text/javascript"></script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

行内属性标签，为了设置宽高，我们经常就会设置成 display：block; 这样一来就产生上述的问题。

解决办法 display：inline; 但是这样一来我们就不能设置宽高了，所以呢需要再加个 display:table.

所以你设置 display:block 后，再添上 display:inline 和 display:table

# 上下 margin 重合问题

相邻的两个 div margin-left margin-right 不会重合，但相邻的 margin-top margin-bottom 会重合。

<style>
  .box1 {
    width: 200px;
    height: 200px;
    border: 1px solid #333;
  }
  .mt {
    margin-top: 10px;
  }
  .mb {
    margin-bottom: 10px;
  }
</style>
<div class="box1 mb"></div>
<div class="box1 mt"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 标签属性 min-height 是不兼容的

.box {
  min-height: 100px;
  height: auto !important;
  height: 100px;
  overflow: visible;
}

1
2
3
4
5
6

# 超链接访问过后样式混乱，hover 样式不出现了

其实主要是其 CSS 属性的排序问题

最好按照这个顺序：L-V-H-A

简单的记法是 love hate

a:link {
}
a:visited {
}
a:hover {
}
a:active {
}

1
2
3
4
5
6
7
8

# 12px 文本

chrome 下默认会将小于 12px 的文本强制按照 12px 来解析。

-webkit-text-size-adjust: none;

# png 图片

png24 位的图片在 IE6 下面会出现背景，所以最好还是使用 png8 格式的

# 鼠标的手势

FireFox 的 cursor 属性不支持 hand，但是支持 pointer，

IE 两个都支持；所以为了兼容都用 pointer

# 消除 ul、ol 等列表的缩进

其中 margin 属性对 IE 有效，padding 属性对 FireFox 有效

.ulol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

1
2
3
4
5

# CSS 透明度

一般就直接 opacity: 0.6 ;
IE 就 filter: alpha(opacity=60);
IE6 下 filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

@mixin opacity(n: 1) {
  opacity: n;
  filter: alpha(opacity=n * 100);
  filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=n * 100);
}

1
2
3
4
5

# FF 和 IE6 下面图片间隙

有些时候图片下方会出现一条间隙

<div><img src="1.jpg" /></div>
<style>
  img {
    verticle-align: center;
  }
</style>

1
2
3
4
5
6

# 高度问题

IE6 下 div 高度无法小于 10px

比如定义一条高 2px 的线条，FF 和 IE7 都正常

但 IE6 就是 10px

解决的办法有两种：

添加 overflow 属性
设置 fontsize 大小为高度大小

<div style="height:2px;overflow:hidden;background:#000000;width:778px;"></div>
<div style="height:2px;font-size:2px;background:#000000;width:778px;">&nbps;</div>

1
2

# 不兼容 transform

使用 filter 的 Matrix（矩阵）

# 不兼容 border-radius

推荐用背景图代替

# 不兼容 text-overflow

overflow: hidden;
white-space: nowrap;

1
2

# hack

在 Web 页面制作中尽量不要使用 CSS Hack 来处理兼容问题。因为任何浏览器下出现渲染不一致都极有可能是我们自己的结构或样式不符合 W3C 的某些要求，或者说违背了浏览器的某些规则而造成的，所以我们应该尽量通过结构或 CSS 的修改来达到各浏览器渲染一致效果，除非到了万不得已情况下，才考虑 CSS 的 Hack。

# css 类内属性前缀法：

css 类内属性前缀法，即在 CSS 样式属性名前加上一些只有特定浏览器才能识别的 hack 前缀，以达到预期的页面展现效果。比如 _ 可以被 IE6/IE7 识别，但 _ 只能被 IE6 识别，IE6-IE10 都可以识别 "\9"，IE6 不能识别!important FireFox 不能识别 _ _ \9

规则说明：在标准模式中

“-″减号是 IE6 专有的 hack
“\9″ IE6/IE7/IE8/IE9/IE10 都生效
“\0″ IE8/IE9/IE10 都生效，是 IE8/9/10 的 hack
“\9\0″ 只对 IE9/IE10 生效，是 IE9/10 的 hack

.type {
  color: #111; /* all */
  color: #222\9; /* IE */
  *color: #333; /* IE6/IE7 */
  _color: #444; /* IE6 */
}
.hack {
  /*demo1 */
  /*demo1 注意顺序，否则IE6/7下可能无法正确显示，导致结果显示为白色背景*/
  background-color: red; /* All browsers */
  background-color: blue !important; /* All browsers but IE6 */
  *background-color: black; /* IE6, IE7 */
  +background-color: yellow; /* IE6, IE7*/
  background-color: gray\9; /* IE6, IE7, IE8, IE9, IE10 */
  background-color: purple\0; /* IE8, IE9, IE10 */
  background-color: orange\9\0; /*IE9, IE10*/
  _background-color: green; /* Only works in IE6 */
  *+background-color: pink; /*  WARNING: Only works in IE7 ? Is it right? */
}

/*可以通过javascript检测IE10，然后给IE10的<html>标签加上class=”ie10″ 这个类 */
.ie10 #hack {
  color: red; /* Only works in IE10 */
}

@media screen and (min-width: 0) {
  .hacktest {
    background-color: black\0;
  } /*opera*/
}
@media screen and (min-width: 0) {
  .hacktest {
    background-color: purple\9;
  } /*  for IE9/IE10  PS:国外有些习惯常写作\0，根本没考虑Opera也认识\0的实际 */
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .hacktest {
    background-color: green;
  } /* for IE10+ 此写法可以适配到高对比度和默认模式，故可覆盖所有ie10的模式 */
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .hacktest {
    background-color: gray;
  }
} /*for Chrome/Safari*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

# 条件注释法: html 引用外部文件

IE 条件注释法，即在正常代码之外添加判别 IE 浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才回执行里边的代码。

<!--[if IE 6]>
  <link href="ie/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 9]>
  <link href="ie/ie9.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 8]>
  <link href="ie/ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 7]>
  <link href="ie/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE]>
  <link href="ie/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 9]>
  <script src="html5_shrrr.js"></script>
<![endif]-->

<!--[if !IE]>
  这段文字只在非IE浏览器显示
<![endif]-->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Firefox

Firefox

Firefox

# 参考文档

ie 兼容