遇到的兼容性问题

来源：互联网发布：泰牛程序员学费多少编辑：程序博客网时间：2024/06/13 15:56

在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条纹进度条效果失效

0 0