如何修改CSS/JavaScript使jReject兼容IE9以下版本？

我之前帮客户处理过类似的旧浏览器兼容需求，针对你遇到的jReject在IE9以下（尤其是Windows XP上的IE6-8）失效的问题，从JS和CSS两方面给你梳理可行的修复方案：

一、先搞定JavaScript兼容性问题 #

旧IE（IE8及以下）完全不支持ES5的核心语法（比如forEach、addEventListener），而jReject的源码大概率用到了这些，所以第一步要补全兼容垫片：

1. 引入ES5兼容垫片
   在加载jReject之前，先引入es5-shim和es5-sham，这两个脚本能让旧IE模拟ES5的核心方法。把这段代码放在<head>最前面：

   <!-- 适配IE8及以下的ES5语法支持 -->
   <script src="path/to/es5-shim.min.js"></script>
   <script src="path/to/es5-sham.min.js"></script>
   <!-- 再加载jReject插件 -->
   <script src="path/to/jquery.jreject.js"></script>
   

2. 替换插件中的不兼容API
   打开jReject的源码，检查并替换这些点：

   • 把document.querySelector/querySelectorAll换成jQuery的选择器（比如$('.jreject-modal')[0]），因为jQuery在旧IE里做了DOM选择的兼容；
   • 把数组的forEach方法换成$.each，比如将items.forEach(function(item) { ... })改成$.each(items, function(index, item) { ... })；
   • 把addEventListener换成jQuery的on方法，比如element.addEventListener('click', func)改成$(element).on('click', func)。

3. 调整初始化代码的写法
   旧IE对箭头函数、简写对象字面量完全不兼容，所以初始化代码要改成最基础的写法：

   $(document).ready(function() {
       $.reject({
           reject: {
               msie: true,
               msie_version: 10 // 确保IE10及以下都触发弹窗
           },
           // 其他配置保持不变，注意不要用箭头函数和属性简写
           header: "您的浏览器版本过低",
           paragraph1: "为了获得更好的体验，请升级您的浏览器",
           closeMessage: "关闭此提示"
       });
   });
   

   另外，一定要用jQuery 1.x版本（比如1.12.4），jQuery 2.x及以上已经放弃了IE6-8的支持。

二、修复CSS的兼容问题 #

旧IE对现代CSS属性支持极差，比如rgba、border-radius、position: fixed，需要针对性修复：

1. 用IE条件注释加载专属CSS
   在页面的<head>里添加这段代码，只为IE9以下加载兼容样式：

   <!--[if lt IE 9]>
   <link rel="stylesheet" href="path/to/jreject-ie-fix.css">
   <![endif]-->
   

2. 编写IE兼容样式
   在jreject-ie-fix.css里添加这些规则：

   • 半透明背景兼容：把rgba(0,0,0,0.8)换成实色加IE滤镜：

     .jreject-overlay {
         background: #000 !important;
         filter: alpha(opacity=80); /* IE6-8半透明 */
         opacity: 0.8; /* IE9+兼容 */
     }
     

   • 圆角兼容：用PIE.htc实现IE6-8的圆角效果（需要下载这个文件放到项目里）：

     .jreject-modal {
         border-radius: 5px;
         -ms-border-radius: 5px; /* IE9 */
         behavior: url(path/to/PIE.htc); /* IE6-8圆角 */
     }
     

   • 固定定位兼容：IE6完全不支持position: fixed，换成绝对定位结合表达式模拟：

     /* 只针对IE6 */
     * html .jreject-modal {
         position: absolute;
         top: expression(eval(document.documentElement.scrollTop + 100)); /* 距离顶部100px，随滚动跟随 */
     }
     

   • 盒模型兼容：IE6-7的盒模型是怪异模式，确保弹窗的宽高计算正确：

     .jreject-modal {
         box-sizing: border-box;
         -ms-box-sizing: border-box;
         *behavior: url(path/to/boxsizing.htc); /* IE6-7盒模型修复 */
     }
     

三、额外的优化建议 #

1. 测试环境要准确：用VirtualBox安装Windows XP镜像，直接测试IE6-8的实际效果，不要只依赖浏览器开发者工具的模拟；
2. 简化弹窗结构：如果插件默认的弹窗结构太复杂，旧IE渲染异常，可以自定义弹窗的HTML，只保留核心的提示文字和下载链接；
3. 关闭不必要的动画：插件里的transition、transform动画在旧IE里完全无效，直接注释掉相关CSS规则，避免影响渲染。

内容的提问来源于stack exchange，提问作者user9311312