IE-compatibility

优质

小牛编辑

124浏览

2023-12-01

polyfills

HTML Polyfills

HTML5 Cross Browser Polyfills

html5shiv

This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer.

<!--[if lte IE 9]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Respond

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

es6-promise

Usage in IE<9

IE hack

html 版本判断标签

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> 非IE浏览器或者IE版本大于IE9 <!--<![endif]-->

CSS hack


 /* IE6：的样式... */
_selector{
    property:value;
}

/* IE7：的样式... */
+selector{
    property:value;
}

/* IE8、IE11：的样式... */
selector{
    property:value\0;
}

/* IE6 & IE7：的样式... */
*selector{
    property:value;
}

/* IE6 & IE7 & IE8：的样式... */
selector{property:value\9;}

/* IE9：的样式... */
@media all and (min-width:0) {
    .content .test{
        background: #f009;
        }
}

 /* IE10的样式... */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
   /* IE10的样式... */
}


.ui-news p{
    color:#000; /*for all*/
    color:#111\9; /*for all ie*/
    color:#222\0; /*for ie8 and later,opera without webkit*/
    color:#333\9\0; /*for ie9 and later*/
}

指定IE文档版本

<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="X-UA-Compatible" content="ie=9">

IE无法支持大尺寸CSS

IE7，IE8，IE9对CSS文件的长度都有某种限制，超出部分会自动截断
IE9的限制在250K左右

IE Table td - position:relative;

在IE 使用以下样式，在td中同时使用background-color、position:relative会造成表格的边框无法显示：

td.formbuilder-table-cell-index {
    background-color: #DFE3E8;
    border: 1px dashed #ccc;
    position: relative;
}

使用以下的样式解决IE显示问题：

td.formbuilder-table-cell-index {
    position: relative;
    background-color: #DFE3E8;
    border: 1px dashed #ccc;
    z-index: -1;
    background-clip: padding-box;
    z-index: 1;
}

判断IE浏览器

IE 8 9 10 11 Edge

!!window.ActiveXObject || "ActiveXObject" in window

Firefox hack

去除数字类型的按钮


 /* 去除 input[type="number"] 类型的数字按钮 */
.hqgrid input[type="number"] {
    -moz-appearance: textfield;
}

Chrome hack

去除获得焦点时的带颜色边框

/* Chrome浏览器中输入框以及其它表单控件获得焦点时的带颜色边框:设置表单控件的outline属性为none值 */
input {
    outline:none
}

去除数字类型的按钮

 /* 去除 input[type="number"] 类型的数字按钮 */
.hqgrid input::-webkit-outer-spin-button,
.hqgrid input::-webkit-inner-spin-button {
    -webkit-appearance: textfield;
}

hack

取消浏览器文本的选择

css (for browsers not IE):

  li {
              user-select: none; /* CSS3 (little to no support) */
          -ms-user-select: none; /* IE 10+ */
      -moz-user-select: none; /* Gecko (Firefox) */
      -webkit-user-select: none; /* Webkit (Safari, Chrome) */
  }

阻止默认事件

  this.elem.on("mousedown", function(e) {
      ...
      e.preventDefault();
  }

元素禁止

  $('li').attr('unselectable', 'on'); // IE

全局禁止

  window.onload = function() {
      document.onselectstart = function() {
          return false;
      }
  }

清除全部选中的文本

  var clearSlct = "getSelection" in window ?
      function () {
          window.getSelection().removeAllRanges();　　
      } :
      function () {
          document.selection.empty();　　
      };

HTML

edge浏览器：

title:IE对title的字符数和换行数有限制。

汉字大约570；字母大约400；最多22行