做网站遇到的兼容性问题，包括兼容ie8以下

news/2024/5/8 14:54:21/文章来源:https://blog.csdn.net/xieqian0204/article/details/87860648

1.如果在做网站的过程中用到了jquery,又要兼容低版本的浏览器，尽量用低版本的jquery，而不是最新的，高版本的哦；

Jquery从2.x版本开始已经不再进行IE低版本(IE6、IE7、IE8)的兼容性处理。如果需要兼容低版本的IE版本，建议使用原生JS或者低版本的Jquery1.x版本。

一般的处理方式是判断不同的浏览器写不同的js,例如：

<script language="javascript"> 
//判断是否为IE浏览器
if(navigator.appName == "Microsoft Internet Explorer") 
{ if(navigator.appVersion.match(/7./i) == '6.' ||navigator.appVersion.match(/7./i) == '7.' ||navigator.appVersion.match(/7./i) == '8.') { document.write("<script src=\"myjs1.js\">"+"</script>"); }else{     document.write("<script src=\"myjs2.js.js\">"+"</script>"); } 
} 
</script>

2.css3中border-radius的兼容性，除了要兼容各个主流浏览器之外，还要兼容IE8以下，兼容IE8以下光是用-ms-是不好使的，需要引入“PIE.htc”文件；这个文件可以在网上下载哦，下载不到的可以留言哦。

///html
<div class="sidebar" id="adleft"><p><img src="../images/guanzhu.png"/>关注<img class="about_uss" src="../images/about_us.jpg"></p><p><img src="../images/message.png"/>消息</p> 
</div>
///css
.sidebar{width: 60px;height: 355px;float: left;border: 2px solid #f5f3f3;-webkit-border-radius: 20px;    //safari、chrome-moz-border-radius: 20px;       //firefox-ms-border-radius: 20px;        //ie浏览器border-radius: 20px;behavior: url(../js/PIE.htc);   //兼容IE8以下引入position: fixed;right: 0px;top: 25%;background: white;display: none;
}

3.在做网站的过程中，会碰到要做半透明的遮罩，一般情况我们会使用rgba(0,0,0,.5)这样的形式来对半透明进行设置，而到IE8rgba（）就不能很好的实现效果；

例如：半透明的黑色；IE8以外的浏览器：background：rgba(0,0,0,.3);

IE8:filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);

rgba(0,0,0,.3)的意思是：#000的透明度为0.3，前三位是颜色的色值，第四位是透明度；

IE8兼容的：这句话的意思本来是渐变的，但由于并没有渐变，所以startColorstr和endColorstr是一样的，而 startColorstr和endColorstr的值的前三位#4C指的是rgba透明度0.3的IEfilter值，从0.1到0.9会一一对应一个IEfilter值。