ie8兼容性

作者: 花影_62b4 | 来源:发表于2022-02-24 15:35 被阅读0次

## rgba 颜色格式

*   IE8 不支持 `rgba(0, 0, 0, .5)` 这种颜色格式。
*   解决方案：可以利用一张半透明的 png 图片来兼容 IE8。

## flexbox

*   根据 [caniuse](https://coderfe.gitbooks.io/notes/content/FrontEnd/caniuse.com) 给出的数据，IE8 是不支持 `flex` 布局属性的， 甚至 IE11 只支持一部分。
*   解决方案：利用 `display: inline-block` / `display: table` / `display: inline` 来实现部分兼容。
*   [Almost complete guide to flexbox (without flexbox)](https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox)，介绍了一些不用 `felx` 属性来完成 `flexbox` 布局的技术，很有参考价值，推荐。
*   [Flexbox Patterns](http://www.flexboxpatterns.com/site-header)，一些利用 `flex` 实现常用的布局的例子，推荐参考。

## HTML5

*   非常遗憾，HTML5 新增的标签在 IE8 里是不受支持滴，例如：`section` / `main` / `header` / `footer`等。
*   解决方案：[html5shiv](https://github.com/aFarkas/html5shiv)，这个脚本可以实现兼容 IE8 。

## media query

*   非常非常遗憾，IE8 也不支持 `media query` 。
*   解决方案：[Respond.js](https://github.com/scottjehl/Respond)

## CSS3 新特性

*   IE8 支持的 CSS3 新特性仅有 20% ，具体可以查看 [caniuse](http://caniuse.com/#search=css3) 。
*   解决方案：[css3pie](https://github.com/lojjic/PIE)，目前 css3pie 可以支持的功能有：
    *   border-radius
    *   box-shadow
    *   border-image
    *   multiple background images
    *   linear-gradient as background image

## innerHTML

*   IE8 不支持 innerHTML ，如果在 IE8 中运行类似 `el.innerHTML = '<div>' + content + '</div>'`的脚本时会报错如下：

    ```
    Unknown runtime error

    ```

*   可以利用这两种方法 `document.createElement()` & `appendChild()` ，动态创建并插入到目标元素。

ie9上box-shadow不能正常显示，需要加border-collapse: separate;
ie8上显示box-shandow的方法：需要加 behavior: url(PIE/PIE.htc)，千万不能加"../PIE.htc";

  border-collapse: separate;
    background-color: #fff;
    box-shadow: 1px 5px 10px 0px #eee ;
    -moz-box-shadow: 1px 5px 10px 0px #eee ;
    -webkit-box-shadow: 1px 5px 10px 0px #eee ;
    behavior: url(PIE/PIE.htc);

image.png

ie上设置字体为加粗后，出现这种存在乱码的情况，解决方式 body{font-famliy:""},文字即可正常显示

兼容placeholder写法

// 兼容placeholder写法
           function showPlaceholder(fontWeight) {
                fontWeight=fontWeight?fontWeight:'normal';
                $('input[placeholder],textarea[placeholder]').each(function () {
                    var that = $(this),
                        text = that.attr('placeholder');                        
                    if (that.val() === ""|| that.val() ===text) {                        
                        that.val(text).css({'color': '#999',"fontWeight":'normal',"fontSize":"14px"});
                    }else{
                        console.log(123)
                        that.css({'color':'#333',"fontWeight":fontWeight,"fontSize":fontWeight=='normal'?"14px":"18px"});
                    }
                    that.focus(function () {
                        if (that.val() == text) {                            
                            that.val("")
                            that.attr('placeholder',"");
                            that.css({'color':'#333',"fontWeight":fontWeight,"fontSize":fontWeight=='normal'?"14px":"18px"});
                        }
                    }).blur(function () {
                        if (that.val() === "") {
                            that.val(text).css({'color': '#999',"fontWeight":'normal',"fontSize":"14px"});
                        }else{
                            that.css({'color':'#333',"fontWeight":fontWeight,"fontSize":fontWeight=='normal'?"14px":"18px"});
                        }
                    }).closest('form').submit(function () {
                        if (that.val() === text) {
                            that.val('');
                        }
                    });
                });
            }

select多选
css

.cb-Checkbox{
    display: inline-block;
    width:340px;
    position: relative;
    cursor: pointer;
}
.cbInput-box{
    padding-left: 10px;
    padding-right: 30px;
    width: 100%;
    height: 50px;
    line-height: 50px;   
    border-radius: 5px;
    background-color: #eee;
    border: 0px solid #eee;
}
.cbOption-box{
    z-index: -1;
    /* opacity: 0;
    filter:Alpha(opacity=0); */
    display: none;
    position:absolute;
    text-align: left;
    border: 1px solid #999999 ;
    width: 100%;  
    background-color: #ffffff;
    /* padding-right: 30px; */
 
    border: 1px solid #d2d2d2;
    overflow-y: auto;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,.12);
    box-sizing: border-box;
}
.cbOption{
    cursor:pointer;
    line-height: 36px;
    padding-left: 10px;
}
.active{
    background-color: #5FB878;
    color: #fff;
}

// 调用函数
function cbInit(cbValue,cbOptions){
    var cbValue = cbValue
    var cbOptions = cbOptions
    cbInputInit(cbValue)
    cbOptionsInit(cbOptions,cbValue)
}
 
// 输入框初始化
function cbInputInit(cbValue){
    var inputtext = ''
    $(cbValue).each(function(index,item){
        if(index < cbValue.length-1){
            inputtext += item.name+' , '
        }else{
            inputtext += item.name 
        }
    })
    $('.cbInput-box').val(inputtext)
}
// 选择项显示隐藏
$(".cbInput-box").on("click", function(){
    if($('.cbOption-box').css("display")=="none"){
        $('.cbOption-box').css("display","block")
        $('.cbOption-box').css("z-index",999)
    }else{
        $('.cbOption-box').css("display","none")
        $('.cbOption-box').css("z-index",999)
    }
})
 
// 光标移开输入框和选择框隐藏
var ifinInputbox = false
var ifinOptionbox = false
$(".cbInput-box").mouseover(function(){
       ifinInputbox = true
}).mouseout(function(){
     ifinInputbox = false
});
$(".cbOption-box").mouseover(function(){
    ifinOptionbox = true
}).mouseout(function(){
    ifinOptionbox = false
});
    // 下面两个blur事件在谷歌浏览器不支持,ie8支持，不影响使用。（有更好的解决方案希望留言讨论）
$(".cbInput-box").on("blur", function(){
   if(!ifinOptionbox){
    $('.cbOption-box').css("display","none")
    $('.cbOption-box').css("z-index",999)
   }
})
$(".cbOption-box").on("blur", function(){
   if(!ifinInputbox){
    $('.cbOption-box').css("dispaly","none")
    $('.cbOption-box').css("z-index",998)
   }
})
 
// 选择项初始化
function cbOptionsInit(cbOptions,cbValue){
    $(".cbOption-box").empty();
    for(var i = 0;i<cbOptions.length;i++){
        var ifactive = false
        $(cbValue).each(function(index,item){
            if(cbOptions[i].id == item.id){
                ifactive = true
            }
        })
        if(ifactive){
            $('.cbOption-box').append("<p id='999' class='cbOption active' dataid="+ cbOptions[i].id +">"+cbOptions[i].name+"</p>")
        }else{
            $('.cbOption-box').append("<p class='cbOption' dataid="+ cbOptions[i].id +">"+cbOptions[i].name+"</p>")
        }
    }
 
    // 选择事件
    $(".cbOption").on("click", function(){
        if($(this).attr("class").indexOf('active')== -1){
            $(this).addClass("active");
            cbChange(true,$(this).attr('dataid'))
        }else{
            $(this).removeClass("active");
            cbChange(false,$(this).attr('dataid')) 
        }
        
    });
    // 选择项变化时输入框的变化
    function cbChange(ifadd,id){
        if(ifadd){
            $(cbOptions).each(function(index2,item2){
                if(id == item2.id){
                    cbValue.push(item2) 
                    cbInputInit(cbValue)
                    return
                }
            })
        }else{
            $(cbValue).each(function(index,item){
                if(id == item.id){ 
                    cbValue.splice(index,1)
                    cbInputInit(cbValue)
                    return
                }
            })
        }
    }
}

html

<div class="cb-Checkbox">

                        <input class="cbInput-box" name="products" value="" readonly="readonly" placeholder="请选择要激活的产品"/>
                        <div class="cbOption-box"></div>
                    </div>

ie8下使用ajax失效问题解决
1.ajax传参类型可为 data1 = "name="+name+"&tel="+tel;或 data:{"id":id}

2.IE浏览器发送请求时，会默认获取前一次获取的数据，添加 cache:false

3.IE中接收数据类型为dataType:"json"

4.IE浏览器不支持CORS，在发送ajax请求之前添加jQuery.support.cors=true;即可

function request(url,method,callback){
  jQuery.support.cors=true; 
 var requestUrl="[XXXX]";    
$.ajax({ 
 url:requestUrl+url, 
 type:method,  
dataType:"json",  
contentType: "text/plain; charset=UTF-8",  
timeout:600000,
  cache:false, 
 success: function(res){  callback(res); 
 }  
}); 
 }

ie8兼容性

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读