IE compatibility summary

Browser compatibility is a headache, which belongs to ie8. Now we will sort out frequently encountered problems and solutions, and we will update them in the future. . .

The statistics involved in js:

1. IE8 compatible console.log

window.console =
  window.console ||
  (function () {
    
    
    var c = {
    
    };
    c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = function () {
    
    };
    return c;
  })();

2. String.trim() method, removing the space event is not compatible with iE8,9

if (!String.prototype.trim) {
    
    
  String.prototype.trim = function trim() {
    
    
    return this.replace(/^\s+|\s+$/g, "");
  };
}

3. oninput, onchange, onpropertychange
   oninput event: the current object property changes, it will trigger the event (non-ie)
   onpropertychange : it is the IE version
   in the input, if you want to capture the user's keyboard input, you can use onkeyup to check the event, but onkeyup does not Copy and paste are supported, so it is necessary to dynamically monitor the change of the value in the textarea, which requires the combination of onpropertychange (used in IE browsers) and oninput (non-IE browsers):

   Ev.on(ele, "input propertychange", function (e) {
         
         
     // do something
   });
   

4. placeholder https://github.com/mathiasbynens/jquery-placeholder
   HTML5 attribute placeholder is not supported under IE8, but there are many js plugins to solve this problem, such as jquery-placeholder.

5. Click event onclick in Google Chrome will trigger onmouseout and onmouseleave by default

if (event.relatedTarget != null) {
    
    
  //doSomeThing()
}

This attribute does not support IE, but IE will not appear in Google. 2. Css related statistics:

1. ie is not compatible with border-radius

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
behavior: url('../lib/PIE-1.0.0/PIE.htc');    /*引用PIE.htc文件的路径*/

2. text-overflow text overflow

overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis; /* for Opera */
text-overflow: ellipsis; /* for IE */

3. Incompatible with line-height

line-height: 32px;
line-height: 32px\9; /*IE8*/
*line-height: 32px; /* IE7支持 */
_line-height: 32px; /* IE6支持 */
-ms-line-height: 32px; /*IE9+支持*/
-webkit-line-height: 32px; /*chrome safair*/
-moz-line-height: 32px; /*火狐*/

4. Compatible with html5 tags and some attributes of css3
   html5shiv.js, html5media.js, respond.js
   modernizr (a plug-in compatible with css3, html5 and other elements)
5. box-shadow

/**filter:--低于ie8的--*/
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=0,strength=6) 
　　　　　　  progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=90,strength=6) 
　　　　　　　progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=180,strength=6) 
　　　　　　　progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=270,strength=6)";

6. rgba() and opacity:
   opacity: cannot achieve the effect of element transparent text opacity

opacity: 0.5;
/** ie： filter:Alpha(opacity=x) */

rgba: to achieve the effect of transparent elements and opaque text

background: rgba(255, 255, 255, 0.1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);