IE的CSS / JS問題

Question

我有一個使用JS（原型）在產品頁面上顯示選項卡式內容的Magento網站，例如這一頁： http : //persianrose.co.uk/index.php/face/rose-day-cream.html

它是基於活動選項卡的簡單的JS更改CSS顯示屬性，但是選項卡容器中的文本內容對於某些用戶不顯示。 [NB？]一些用戶說，如果刷新頁面，他們可以看到選項卡嗎？

沒有一種模式，例如所有用戶都使用特定版本的IE； 我將其范圍縮小到使用IE 7和IE8的某些人。 有些沒有。 我無法在這些瀏覽器的版本中重新創建該問題，因此我依賴於有同事的反饋來確定我嘗試過的東西是否奏效，但到目前為止還沒有奏效。

通過這些用戶的測試，有些情況下有兩個用戶具有IE的確切版本，但一個用戶正確查看了標簽容器的內容，而另一個則看不到它。

我嘗試修補各種可能的IE CSS怪癖。 現在我在問我的JS嗎？ 他們的瀏覽器安全設置？ 我不知道。 我難過...

在涉及的語言中，我最不擅長JavaScript，因此這將是查找失敗的第一位。

這是受影響用戶的輸出的屏幕截圖： http : //dl.dropbox.com/u/6136148/error.jpg

在此先感謝您的時間和精力。

HTML：

<ul id="tabs">
  <li class="tab"><a href="#how-to-use">How to use</a></li>
  <li class="tab"><a href="#ingredients">Ingredients</a></li>
</ul>
<div class="tab-container">
  <div id="how-to-use">This is a wonderful toner for use after cleansing morning and night.</div>
  <div id="ingredients">Aqua Rosa damascena, Citral, Citronellol, Farnesol, Linalool, Geraniol.</div>
</div>

CSS：

ul#tabs {list-style:none; padding:0}
ul#tabs li {float:left; margin:0 4px 0 0}
ul#tabs a {
  background:#fcfcfc;
  color:#bbb;
  display:block;
  font-family:'ColaborateRegular';
  font-size:13px;
  padding:5px 10px;
  width:80px;
  border:1px solid #eee;
  border-bottom-color:#ddd;
  position:relative;
  text-align:center;
  text-decoration:none;
  z-index:99;
}
ul#tabs a.active-tab {
  background:#fff;
  color:#843549;
  border-color:#ddd;
  border-bottom:1px solid #fff
}
.tab-container {
  padding:10px;
  margin-top:9px;
  width:390px;
  height:1%;
  min-height: 1% ;
  border:1px solid #ddd;
  zoom: 1;
  position: relative;
}

.tab-container div {display:none}
.tab-container div.active-tab-body, 
.tab-container div.active-tab-body div {display:block}

JS（原型）：

var Fabtabs = Class.create({
initialize : function(element,options) {
    var parent = this.element = $(element);
    this.options = Object.extend({
      hover: false,
      remotehover: false,
      anchorpolicy: 'allow-initial' // 'protect', 'allow', 'allow initial', 'disable'
    }, options || {});
    this.menu = this.element.select('a[href*="#"]');
    this.hrefs = this.menu.map(function(elm){
      return elm.href.match(/#(\w.+)/) ? RegExp.$1 : null;
    }).compact();
    this.on(this.getInitialTab());
    var onLocal = function(event) {
      if(this.options.anchorpolicy !== 'allow'){ event.stop(); }
    var elm = event.findElement("a");
    if (elm.href.match(/#(\w.+)/)) {
      this.activate(elm);
      if(this.options.anchorpolicy === 'protect') { window.location.hash = '.'+this.tabID(elm); }
      }else {
      document.location = elm.href;
  }
};
var onRemote = function(event) {
  if(this.options.anchorpolicy !== 'allow'){ event.stop(); }
    var trig = event.findElement("a");
    if (elm.href.match(/#(\w.+)/)) {
      this.activate(this.tabID(trig));
      if(this.options.anchorpolicy === 'protect') { window.location.hash = '.'+this.tabID(elm); }
    } else {
        document.location = elm.href;
      }
  }
    this.element.observe('click', onLocal.bindAsEventListener(this));
    if(this.options.hover) {
      this.menu.each(function(elm){elm.observe('mouseover', onLocal.bindAsEventListener(this))}.bind(this));
    }
    var triggers = []; 
    this.hrefs.each(function(id){
      $$('a[href="#' + id + '"]').reject(function(elm){
        return elm.descendantOf(parent)
      }).each(function(trig){
        triggers.push(trig);
      });
    })
    triggers.each(function(elm){
      elm.observe('click', onRemote.bindAsEventListener(this));
      if(this.options.remotehover) {
      elm.observe('mouseover', onRemote.bindAsEventListener(this));
    }
    }.bind(this));
},
activate: function(elm) {
  if(typeof elm == 'string') {
    elm = this.element.select('a[href="#'+ elm +'"]')[0];
  }
  this.on(elm);
    this.menu.without(elm).each(this.off.bind(this));
},
off: function(elm) {
    $(elm).removeClassName('active-tab');
    $(this.tabID(elm)).removeClassName('active-tab-body');
},
on: function(elm) {
    $(elm).addClassName('active-tab');
    $(this.tabID(elm)).addClassName('active-tab-body');
},
tabID: function(elm) {
    return elm.href.match(this.re)[1];
},
getInitialTab: function() {
    if(this.options.anchorpolicy !== 'disable' && document.location.href.match(this.re)) {
      var hash = RegExp.$1;
      if(hash.substring(0,1) == "."){
        hash = hash.substring(1);
      }
      return this.element.select('a[href="#'+ hash +'"]')[0];
    } else {
      return this.menu.first();
    }
},
re: /#(\.?\w.+)/
});
document.observe("dom:loaded", function(){ new Fabtabs('tabs'); });

Answer 1

您那里有一個很明顯的錯誤。 在第16行中，您嘗試訪問this.element以獲取您的a元素。 但是，IE會告訴您this.element是什么（null）。 所以我懷疑分配會出錯：

var parent = this.element = $(element);

要進行檢查，您可以簡化：

var myElement = $(element);

因此，將您傳遞給initialize函數的元素分配給var。 然后，就您的瀏覽器而言，您可以檢查它是否存在：

console.info(myElement);

打開控制台並檢查其內容。 如果仍然顯示null則必須更深入地研究。 當它不通過第16行時，它並沒有連接到任何元素，因此請嘗試是否可以使用其他元素作為測試。 如果失敗，則很可能會在遍歷DOM時卡住或存在一些奇怪的javascript /瀏覽器配置問題。