JQuery boxy插件很好用，但也会出现一些问题，比如弹出框的边角在IE中不能显示。本博文将来解决这个问题。将boxy插件引用到项目中后会有一个boxy.css文件和jquery.boxy.js文件。在boxy.css文件中有给弹出框设置四个角图片的样式，如下图：

不做任何修改在Chrome浏览器下没有问题，如下：

在网上查了一些资料，说将css文件中的图片路径给位全路径可以解决问题，如下：

发现这样修改后并没有作用，运行后效果仍然如下：

有效的解决方法

将上面css截图的下半部分注释掉，如下图：

然后在jquery.boxy.js文件中的Boxy函数中添加一段脚本，下面贴出修改后的Boxy函数代码：


  
  1. function Boxy(element, options) {  
  2.  
  3.     this.boxy = jQuery(Boxy.WRAPPER);  
  4.     jQuery.data(this.boxy[0], 'boxy', this);  
  5.  
  6.     this.visible = false;  
  7.     this.options = jQuery.extend({}, Boxy.DEFAULTS, options || {});  
  8.  
  9.     if (this.options.modal) {  
  10.         this.options = jQuery.extend(this.options, {center: true, draggable: false});  
  11.     }  
  12.  
  13.     // options.actuator == DOM element that opened this boxy  
  14.     // association will be automatically deleted when this boxy is remove()d  
  15.     if (this.options.actuator) {  
  16.         jQuery.data(this.options.actuator, 'active.boxy', this);  
  17.     }  
  18.  
  19.     this.setContent(element || "<div></div>");  
  20.     this._setupTitleBar();  
  21.  
  22.     this.boxy.css('display', 'none').appendTo(document.body);  
  23.     this.toTop();  
  24.  
  25.     if (this.options.fixed) {  
  26.         if (jQuery.browser.msie && jQuery.browser.version < 7) {  
  27.             this.options.fixed = false; // IE6 doesn't support fixed positioning  
  28.         } else {  
  29.             this.boxy.addClass('fixed');  
  30.         }  
  31.     }  
  32.  
  33.     if (this.options.center && Boxy._u(this.options.x, this.options.y)) {  
  34.         this.center();  
  35.     } else {  
  36.         this.moveTo(  
  37.             Boxy._u(this.options.x) ? this.options.x : Boxy.DEFAULT_X,  
  38.             Boxy._u(this.options.y) ? this.options.y : Boxy.DEFAULT_Y  
  39.         );  
  40.     }  
  41.  
  42.     //fengwei add 2010-11-28  
  43.     //用于解决弹出框的圆角在ie中的显示问题  
  44.     if ($.browser.msie) {  
  45.         var setFilter = function(cls) {  
  46.             var obj = $(cls), ret = obj.css("background-p_w_picpath").match(/url\(\"(.+)\"\)/);  
  47.             if (ret == null || ret.length < 1) return;  
  48.             obj.css({  
  49.                 "background": "none", "filter": "alpha(opacity=0)",  
  50.                 "filter": "progid:DXImageTransform.Microsoft.  
  51.                                              AlphaImageLoader(src='" + ret[1] + "')"  
  52.             });  
  53.         };  
  54.  
  55.         setFilter(".top-left");  
  56.         setFilter(".top-right");  
  57.         setFilter(".bottom-left");  
  58.         setFilter(".bottom-right");  
  59.     }  
  60.  
  61.     if (this.options.show) this.show();  
  62.  
  63. }; 
 
  
修改好css和js文件后，再次运行程序，在IE6,7,8中均能正常弹出带边角的框了。
 
  
希望本文对您有所帮助。