ie8项目遇到的问题

**

ie8项目遇到的问题

**

因为项目兼容问题，所以考虑用Jquery1.12.4+layuimini单页版开发框架

http://layuimini.99php.cn/onepage/v2/index.html#/

样式兼容问题，众所周知，ie8不兼容HTML5 CSS3

那也可以通过一些方法使其兼容。

1 border-radius 和 box-shadow gradient

演示地址:

https://www.zhangxinxu.com/study/201007/pie-ie-css3-demo.html

border-radius
.adius {
  background-color 		: #c0bffb;
  width                 : 289px;
  height                : 40px;
  z-index 				: 10;
  border: 0px solid #b9aed9;
  /*以下下是要添加的PIE.htc代码*/
  position:relative; /*一定要加，否则不显示。注意：父类也要添加相同属性，否则会错位，下面会详细介绍*/ 
  border-radius: 15px; /*这个不能删，虽然IE8不支持这个属性，但是PIE.htc会用到*/
  -webkit-border-radius: 15px; /*以下这两个是PIE.htc设置圆角的属性*/（border-top-left-radius等无效）
  -moz-border-radius: 15px;
  behavior: url('/theme/css/zzjg/PIE.htc'); /*路径要写绝对路径*/
}

.shadow{border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;

/*以下是PIE的代码*/
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
behavior: url(pie.htc);
}

.gradient{
border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
background: #EEFF99;

background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(pie.htc);
}

会遇到一些问题：

1  position:relative; /*一定要加，否则不显示，注意：父类也要添加相同属性，否则会错位
2  border-top-left-radius表示左上圆角，但是PIE确实不支持这种写法
3  如果您发现在您的机子上PIE方法无效，也就是htc文件这里指pie.htc文件无效，检查您的服务器配置，可能其需要更新到最新的content-type。例如对于Apache，您可以在.htaccess文件中左如下处理

摘自https://blog.csdn.net/sinat_33915360/article/details/86504970?biz_id=102&utm_term=ie8%E6%80%8E%E4%B9%88%E8%AE%BE%E7%BD%AEboder-radius&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-86504970&spm=1018.2118.3001.4187

2 背景透明

.aside_table{
    position: relative;
}
.aside_table>.black{
    width: 100%;
    height: 234px;
    position: absolute;
    background-color:rgb(39, 50, 59);
    background-color: rgba(32, 41, 49, 0.4);
    filter: alpha(opacity=40);
    top: 0;
    left: 0;
    z-index: -1;

}
只能另外定位，不然所有子元素都会有透明效果

3 兼容console.log

    //ie8兼容window.console
    window.console = window.console || (function () {
        var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile
                 = c.clear = c.exception = c.trace = c.assert = function () { };
        return c;
    })();

4 兼容object.keys

        function GetObjectKey(){
           // Object.keys兼容ie8
              if (!Object.keys) {
                    Object.keys = (function () {
                    var hasOwnProperty = Object.prototype.hasOwnProperty,
                    hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
                    dontEnums = [
                            'toString',
                            'toLocaleString',
                            'valueOf',
                            'hasOwnProperty',
                            'isPrototypeOf',
                            'propertyIsEnumerable',
                            'constructor'
                    ],
                    dontEnumsLength = dontEnums.length;
         return function (obj) {
            if (typeof obj !== 'object' && typeof obj !== 'function' || obj === null) throw new TypeError('Object.keys called on non-object');
      
      
            var result = [];
      
      
            for (var prop in obj) {
              if (hasOwnProperty.call(obj, prop)) result.push(prop);
            }
      
      
            if (hasDontEnumBug) {
              for (var i=0; i < dontEnumsLength; i++) {
                if (hasOwnProperty.call(obj, dontEnums[i])) result.push(dontEnums[i]);
              }
            }
            return result;
          }
        })()
      
      };
      if (!Object.keys) Object.keys = function(o) {
        if (o !== Object(o))
          throw new TypeError('Object.keys called on a non-object');
        var k=[],p;
        for (p in o) if (Object.prototype.hasOwnProperty.call(o,p)) k.push(p);
        return k;
      }
        },

5 jsrender模板语法 使用innerHTML 在ie上会莫名奇妙的渲染

ul中会生成div,建议使用html

6 localstorage不兼容 建议使用 cookie。打开非项目页面 cookie会丢失

7 解决跨域问题

dataObj为传的值
jQuery.support.cors = true;
$.ajax($.extend({
                async : false,
                type: "POST",
                url: config.server + serverRelUrl,
                data: typeof dataObj === 'object' ? JSON.stringify(dataObj) : dataObj,
                headers: {
                    token: shared.getCookie('token'),
                 },
                crossDomain: true,
                cache:false,
                contentType: 'application/json',
                dataType: "json",
                success: function (jResult) {
                },
                error: function (p1,p2,p3) {
                }

            }, setupObj));

8 input的input事件与input.val()冲突