遇到的兼容性问题

在chrome浏览器下调好的页面在ie8中运行出现的兼容性问题：
1、原页面使用echarts绘制图形在chrome浏览器只引用echarts.js能够正常显示，但在ie8下报错：
{//IE中使用VML渲染 if (!painterCtors.vml) { throw new Error(
‘You need to require \’zrender/vml/vml\’ to support IE8’); }
解决：引入zrender包

packages: [ 
            {
                name: 'echarts',
                location: 'echarts/src',      
                main: 'echarts'
            },
            {
                name: 'zrender',
                location: 'zrender/src', // zrender与echarts在同一级目录
                main: 'zrender'
            }
        ]

绘图部分：

var labelTop = {//上层样式
                normal : {
                    label : {
                        show : true,
                        position : 'center',
                        formatter : '{b}分',
                        textStyle: {
                            fontSize:30
                        }
                    },
                    labelLine : {
                        show : false
                    }
                }
            };
        var score=90;
        option = {
            color:['#3399ff', 'white'] , 
            series: [
                {
                    name:'绩效打分',
                    type:'pie',
                    radius: ['70%', '90%'],
                    hoverAnimation:false,
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false,
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:score, name:score,itemStyle : labelTop},
                        {value:100-score, name:'未得分'}
                    ]
                }
            ]
        };
        require(
            [
                'echarts',
                'echarts/chart/pie'
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('circlebar'));
                myChart.setOption(option);
            }
        )

这样在ie8中就能够正常显示啦~
2、flex布局失效
代码中写了flex布局使一横排显示的几个方框间距能够自适应（设置父元素displaly:flex;justify-content:space-between）但在ie8下失效。
解决：float和clear both的妙用，实现flex布局

html部分：
<div class="dfcont dclearfix">
    <div class="dfleft">
        左边框的内容
    </div>
    <div class="dfright">
        右边框的内容
    </div>
   <div class="dfmiddle">
       <div class="innermiddle">
       中间框的内容
       </div>
   </div>
</div>

css部分：
.dfleft{
    float:left;
    padding:12px;
 }
.dfright{
    float:right;
    padding:12px;
 }
.dfmiddle{
    margin:0 /*左右margin具体计算用百分比即可保证响应式*/;
    overflow:hidden;
 }
.dclearfix{*zoom:1;}
.dclearfix:after{
    content:"";
    display:block;
    clear:both;
 }
.innermiddle{
    overflow:hidden;
 }

3、placeholder失效：

/* ie8,9 placeholder兼容 */
        if( !('placeholder' in document.createElement('input')) ){   
            $('input[placeholder],textarea[placeholder]').each(function(){    
              var that = $(this),    
              text= that.attr('placeholder');    
              if(that.val()===""){    
                that.val(text).addClass('placeholder');    
              }    
              that.focus(function(){    
                if(that.val()===text){    
                  that.val("").removeClass('placeholder');    
                }    
              })    
              .blur(function(){    
                if(that.val()===""){    
                  that.val(text).addClass('placeholder');    
                }    
              })    
              .closest('form').submit(function(){    
                if(that.val() === text){    
                  that.val('');    
                }    
              });    
            });    
        } 

4、圆角失效：重写各框border-redius
5、bootstrap条纹进度条效果失效