Penyelesaian kepada masalah bahawa imej sudut pemalam kotak JQuery tidak dipaparkan dalam IE_jquery

Pemalam boxy JQuery mudah digunakan, tetapi terdapat juga beberapa masalah, contohnya, sudut kotak pop timbul tidak boleh dipaparkan dalam IE. Catatan blog ini akan menangani isu ini pada masa hadapan. Selepas merujuk pemalam boxy ke dalam projek, akan ada fail boxy.css dan fail jquery.boxy.js. Dalam fail boxy.css, gaya empat imej penjuru ditetapkan untuk kotak timbul, seperti ditunjukkan di bawah:

Tiada masalah dalam penyemak imbas Chrome tanpa membuat sebarang pengubahsuaian, seperti berikut:

Saya menyemak beberapa maklumat di Internet dan mengatakan bahawa memberikan laluan penuh kepada laluan imej dalam fail css boleh menyelesaikan masalah, seperti berikut:

Saya dapati pengubahsuaian ini tiada kesan Selepas dijalankan, kesannya masih seperti berikut:

Penyelesaian yang berkesan

Ulas bahagian bawah tangkapan skrin css di atas, seperti yang ditunjukkan di bawah:

Kemudian tambahkan skrip pada fungsi Boxy dalam fail jquery.boxy.js Kod fungsi Boxy yang diubah suai disiarkan di bawah:

function Boxy(element, options) {
  
  this.boxy = jQuery(Boxy.WRAPPER);
  jQuery.data(this.boxy[0], 'boxy', this);
  
  this.visible = false;
  this.options = jQuery.extend({}, Boxy.DEFAULTS, options || {});
  
  if (this.options.modal) {
    this.options = jQuery.extend(this.options, {center: true, draggable: false});
  }
  
  // options.actuator == DOM element that opened this boxy
  // association will be automatically deleted when this boxy is remove()d
  if (this.options.actuator) {
    jQuery.data(this.options.actuator, 'active.boxy', this);
  }
  
  this.setContent(element || "<div></div>");
  this._setupTitleBar();
  
  this.boxy.css('display', 'none').appendTo(document.body);
  this.toTop();

  if (this.options.fixed) {
    if (jQuery.browser.msie && jQuery.browser.version < 7) {
      this.options.fixed = false; // IE6 doesn't support fixed positioning
    } else {
      this.boxy.addClass('fixed');
    }
  }
  
  if (this.options.center && Boxy._u(this.options.x, this.options.y)) {
    this.center();
  } else {
    this.moveTo(
      Boxy._u(this.options.x) &#63; this.options.x : Boxy.DEFAULT_X,
      Boxy._u(this.options.y) &#63; this.options.y : Boxy.DEFAULT_Y
    );
  }

  //fengwei add 2010-11-28
  //用于解决弹出框的圆角在ie中的显示问题
  if ($.browser.msie) {
    var setFilter = function(cls) {
      var obj = $(cls), ret = obj.css("background-image").match(/url\(\"(.+)\"\)/);
      if (ret == null || ret.length < 1) return;
      obj.css({
        "background": "none", "filter": "alpha(opacity=0)",
        "filter": "progid:DXImageTransform.Microsoft.
                       AlphaImageLoader(src='" + ret[1] + "')"
      });
    };

    setFilter(".top-left");
    setFilter(".top-right");
    setFilter(".bottom-left");
    setFilter(".bottom-right");
  }
  
  if (this.options.show) this.show();

};

Selepas mengubah suai fail css dan js, jalankan atur cara sekali lagi dan kotak dengan sudut boleh muncul seperti biasa dalam IE6, 7 dan 8.

Semoga artikel ini bermanfaat kepada anda.