您的位置: 首页  >  文章  >  浏览器兼容问题

浏览器兼容问题

分类: 文章 • 2023-03-18 20:50:33

问题：IE8/9不支持Array.indexOf

　　解决方案

浏览器兼容问题
浏览器兼容问题
if (!Array.prototype.indexOf)
{
  Array.prototype.indexOf = function(elt /*, from*/)
  {
    var len = this.length >>> 0;
    var from = Number(arguments[1]) || 0;
    from = (from < 0)
         ? Math.ceil(from)
         : Math.floor(from);
    if (from < 0)
      from += len;
    for (; from < len; from++)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}
浏览器兼容问题

 

问题：IE8-不支持canvas

　　解决方案：引入excanvas.js。但是有一些注意事项参考http://rockyuse.iteye.com/blog/1618298

　　主要的注意事项有：

　　1.必须在canvas标签加载完成后再引入excanvas.js

　　2.与jquery混合使用的时候必须使用jquery1.7以上的版本

 

问题：IE8-不支持css媒体查询

　　解决方案，引入respond.js

　　

我把上面三个IE支持放在一起命名为Array.indexOf_excanvas_respond.js

浏览器兼容问题 View Code

使用的时候判断

<!-- [if lte IE 8]><script src="Array.indexOf_excanvas_respond.js"></script><![endif] -->

 

问题：IE8-不支持trim

　　如果引入了jQuery

if(!String.prototype.trim){
  String.prototype.trim = function(){return $.trim(this);}
}

　　如果没有引入jQuery，参考其做法

浏览器兼容问题
if(!String.prototype.trim){
  var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;  
  function trim( text ) {              
    return text == null ?
    "" :
    ( text + "" ).replace( rtrim, "" );          
  }    
  String.prototype.trim = function(){return trim(this);} 
}
浏览器兼容问题

　　

问题：IE8-不支持css3样式

　　参考8种IE8-支持css3的方式

　　原来比较好的方式是ie-css3.js但是支持有限并且限制也很多。现今最好的是PIE.htc。你可以进入ie-css3官网看到网站的题头已经说明ie-css3已经过时了。

　　下载正式版本PIE1.0.0版本

　　使用方式有两种：

　　PIE.htc

浏览器兼容问题
<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>PIE CSS3 Quick Demo</title>
    <style type="text/css">
        #target {
            position: absolute;
            left: 20px;
            top: 20px;
            width: 200px;
            text-align: center;
            padding: 60px 0;
            background: #EEE;
            border: 1px solid #999;
            font-size: 18px;

            /* default CSS3 values: */
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            -webkit-box-shadow: #666 0 2px 3px;
            -moz-box-shadow: #666 0 2px 3px;
            box-shadow: #666 0 2px 3px;
            background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393));
            background: -webkit-linear-gradient(#9F9, #393);
            background: -moz-linear-gradient(#9F9, #393);
            background: -ms-linear-gradient(#9F9, #393);
            background: -o-linear-gradient(#9F9, #393);
            -pie-background: linear-gradient(#9F9, #393);
            behavior: url(../build/PIE.htc);
        }
    </style>
</head>
<body>
    <div id="target">
        Mmmmm, pie.
    </div>
</body>
</html>
浏览器兼容问题

　　其中behavior属性的的路径根据自己的情况定。效果如下

　　浏览器兼容问题

　　注意：详细可参考PIE使IE支持CSS3圆角盒阴影与渐变渲染中已知的一些问题(下面的问题是本人认为比较重要的问题和别人没有提到的问题)

　　1.IE浏览器的behavior 属性是相对于HTML文档而言的，与CSS其他的属性不一样，不是相对于CSS文档而言的；

　　2.使用PIE实现IE下的CSS3渲染（其他方法也是一样），只能使用缩写的形式，比如border-top-left-radius是不支持的。

　　3.实现的border-radius对overflow:hidden;不起作用

　　3.最好不要和滤镜同时使用。比如，下面css代码想实现圆角和背景半透明

        background: url(../imgs/news-circle.png) no-repeat #000; 
        background: url(../imgs/news-circle.png) no-repeat rgba(0,0,0,0.5); 
        filter: alpha(opacity=50); 
        -ms-border-radius: 350px 350px 0px 0px; 
        border-radius: 350px 350px 0px 0px; 
        behavior: url(PIE/PIE.htc);/*路径相对于html页面而言*/

　　本来前面三句话就实现IE8-下的背景半透明，但是后面使用PIE.htc后反而背景不透明了，效果如下　　

　　浏览器兼容问题

　　然后完全使用PIE的方式

background: url(../imgs/news-circle.png) no-repeat rgba(0,0,0,0.5);
-pie-background: url(assets/common/imgs/news-circle.png) no-repeat rgba(0,0,0,0.5); /*路径相对于html页面而言*/
-ms-border-radius: 350px 350px 0px 0px; 
border-radius: 350px 350px 0px 0px; 
behavior: url(PIE/PIE.htc);/*路径相对于html页面而言*/

　　效果才正常

　　浏览器兼容问题

 　　PIE.js　　

浏览器兼容问题
<!DOCTYPE html>
<html>
<head>

    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>PIE CSS3 Quick Demo</title>
    <style type="text/css">
        #target {
            position: absolute;
            left: 20px;
            top: 20px;
            width: 200px;
            text-align: center;
            padding: 60px 0;
            background: #EEE;
            border: 1px solid #999;
            font-size: 18px;

            /* default CSS3 values: */
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            -webkit-box-shadow: #666 0 2px 3px;
            -moz-box-shadow: #666 0 2px 3px;
            box-shadow: #666 0 2px 3px;
            background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393));
            background: -webkit-linear-gradient(#9F9, #393);
            background: -moz-linear-gradient(#9F9, #393);
            background: -ms-linear-gradient(#9F9, #393);
            background: -o-linear-gradient(#9F9, #393);
            -pie-background: linear-gradient(#9F9, #393);
            /*behavior: url(../build/PIE.htc);*/
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>    
    <script type="text/javascript" src="../build/PIE.js"></script>    
    <script type="text/javascript">
        $( function() {
            $('#target').each(function() {  
                PIE.attach(this);  
            });            
        } );
    </script>

</head>
    <div id="target">
        Mmmmm, pie.
    </div>
</body>
</html>
浏览器兼容问题

　　效果一样。根据情况自行选择使用方式。比较推荐使用PIE.htc的方式，毕竟不用额外增加js。

 

问题：IE8 缓存ajax get请求结果导致ajax都不进入后台就直接取缓存结果

　　这是在用nodejs做个人网站时发现的。IE7/IE9+则没有改问题。本人做了一个登陆页，其中有一段js用来处理如果用户在登陆后的一段有效时间内再次登陆则可以自动跳转到主页。源码如下

浏览器兼容问题
$.ajax({
  url: url,
  type: "get",
  success: function(result){
    if(result.loadStatus == "loaded"){
      window.location = ctx + "/home";
    }
});
浏览器兼容问题

　　而主页会判断session是否匹配，如果不匹配则会将状态更改result.loadStatus = "unload";然后跳转回登陆页（这个处理合不合适先不说）。按照逻辑来说是没有问题的。但是IE8下先有一次登录了，但是session过期了。显现就变成每次登录拿到的状态都是已登录状态，然后请求home页发现session不对跳回登录页，然后再去拿登录状态判断是否请求home页。这完全是一个死循环。 

　　目前发现这个问题的就IE8 ajax get请求。

　　解决办法：ajax请求后面加上时间戳。

 

问题：IE8-不支持background-size

　　网络上的处理都是使用IE滤镜：但问题是只能background-size:100%，不能直接指定任意大小background-size

浏览器兼容问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>让IE兼容background-size的方法</title>
 
<style>
.bgpic {
    background-image: url('http://img0.bdstatic.com/img/image/6992fdda3cc7cd98d10273a6b34233fb80e7aec90cc.jpg');
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img0.bdstatic.com/img/image/6992fdda3cc7cd98d10273a6b34233fb80e7aec90cc.jpg',sizingMethod='scale');
}
</style>
</head>
<body> 
    <div  class="bgpic" style="width:200px;height:100px;"></div> 
</body>
</html>
浏览器兼容问题

　　但是IE滤镜的限制还是比较大：

　　1.src路径不能是相对路径

　　2.容器必须要明确的设定width和height这两个css样式。

 　　所以我在body设置背景是这样处理的

$(function(){
  $("body").css({
    width: $(document).width(),
    height: $(document).height()
  })
})

　　而且使用这个滤镜还有另外的问题:AlphaImageLoader滤镜会导致该区域的链接和按钮无效，一般情况下的解决办法是为链接或按钮添加：position:relative使其相对浮动 要注意的是，当加载滤镜的区域的父层有position:absolute绝对定位的时候使用position:relative也不能使链接。详Microsoft.AlphaImageLoader滤镜讲解

　　原则上这个滤镜是用来支持透明的PNG图片，但是IE7+以上已经支持了。所以不推荐使用该滤镜。

　　如果只是为了布满全屏的话建议切超大背景图。

　　或使用图片标签Img替代背景属性 　　

 

问题：IE8中text-align:center文字标签居中，元素并不居中

　　对于文字标签如span、input、p、textarea等没有问题，但是其他非文字标签都会有这个问题。

　　解决方法：

　　可以在其子元素中加入CSS属性：margin:0 auto;

 

问题：IE9-下img标签出现蓝色边框

　　解决方法

img{
    border-width:0px;
}

 　　

问题：IE8-不支持自定义标签

<include>这是include标签</include>

　　上面的自定义标签在IE8-下回被分解成3个标签

<include/>
文本- 这是include标签
</include/>

　　解决方法

　　在使用之前先创建标签

浏览器兼容问题
<head>
  <!--[if lte IE 8]>
    <script>
      //创建include标签使include正确解析
      document.createElement('include');
    </script>
  <![endif]-->
  <style>
    include {
      display: block;
      border:1px solid red;
    }
  </style>
</head>
<body>
  <include>这是include标签</include>
</body>
浏览器兼容问题

　　使用命名空间也可以解决这个问题

浏览器兼容问题
<html xmlns:ng="">
<head>
<style>
ng\:include {
    display: block;
    border:1px solid red;
}
</style>
</head>
<body>
<ng:include>这是ng:include标签</ng:include>
</body>
</html>
浏览器兼容问题

 

问题：IE7-不支持JSON,无法将字符串转化为JSON对象　　

　　实际上本人描述这个问题不是为了解决这个问题来的。而是描述其解决方法eval和new Function()的作用

　　解决方法

eval(string);
//或
new Function("return " + string);

　　但是尽量避免使用这两种又慢有可能会有bug的方法。

 

问题：IE8-对css文件大小和数量的限制

 　　- Up to 31 CSS files or <style> tags per page. 单个页面最多31个css文件 
　　- Up to 288K per CSS file (uncompressed). 每个css文件大小最大288k 
　　- Up to 4095 selectors per CSS file. 每个css文件最多4095个选择器

　　文档中只有前31个link或style标记关联的CSS能够应用。 

　　解决方法：

　　1.压缩合并css文件

　　2.css文件中使用@import url(...)  

　　注意：一个style标记只有前31次@import指令有效应用。 @import指令下层叠限制不能超过4层 

 

问题：IE8-关键字不能作为属性名称

　　比如我定义

var t = {class: "chua"}

　　在IE8-上会报错，因为class被IE8-认为是关键字

　　解决方法：

　　1. 不使用关键字 
　　2. 关键字属性添加引号，比如我改成这样

var t = {"class": "chua"}
console.log(t["class"]);//访问也不能通过t.class的方式

 

 问题：IE8使用propertychange的委托处理没有作用

　　正常情况我们使用来处理监听输入

$(document).on('input propertychange', 'textarea', function() {
    console.log($(this).val().length + ' characters');
});

　　发现IE8上居然不好使，貌似propertychange事件没有冒泡，所以只能用元素本身

$('textarea').bind('input propertychange', function() {
    console.log($(this).val().length + ' characters');
});

　　oninput 和 onpropertychange 这两个事件在 IE9 中都有个小BUG，

　　那就是通过右键菜单菜单中的 剪切 和 删除 命令删除内容的时候不会触发，

　　而 IE 其他版本都是正常的，目前还没有很好的解决方案。

 

相关推荐