jquery - 类的更改不会导致在 IE6 中应用新类的规则？

Question

我有一个具有 9 种不同状态的图像，并且将适当的背景位置规则设置为类以显示不同的状态。我不能使用 :hover 伪选择器，因为正在更改的背景图像与悬停在其上的元素不同。我以这种方式定义了类:

#chooser_nav {width:580px; height:38px; background:transparent url(/assets/images/chooser-tabs.jpg) 0 0 no-repeat; margin-left:34px;}
#chooser_nav.feat {background-position:0 0;}
#chooser_nav.inv {background-position:0 -114px;}
#chooser_nav.bts {background-position:0 -228px;}
#chooser_nav.featinv {background-position:0 -38px;}
#chooser_nav.featbts {background-position:0 -76px;}
#chooser_nav.invfeat {background-position:0 -152px;}
#chooser_nav.invbts {background-position:0 -190px;}
#chooser_nav.btsfeat {background-position:0 -266px;}
#chooser_nav.btsinv {background-position:0 -304px;}

然后，使用 jQuery，我有一系列基于先前点击事件的悬停规则(此处未声明的“cur”变量已在其他地方正确声明):

  $("#featured_races a").hover(function(){
    cur == "feat" ? $("#chooser_nav").attr("class", cur) : $("#chooser_nav").attr("class", cur+"feat");
  }, function(){
    $("#chooser_nav").attr("class", cur);
  });

  $("#invitational_races a").hover(function(){
    cur == "inv" ? $("#chooser_nav").attr("class", cur) : $("#chooser_nav").attr("class", cur+"inv");
  }, function(){
    $("#chooser_nav").attr("class", cur);
  });

  $("#behind_the_scenes a").hover(function(){
    cur == "bts" ? $("#chooser_nav").attr("class", cur) : $("#chooser_nav").attr("class", cur+"bts");
  }, function(){
    $("#chooser_nav").attr("class", cur);
  });

因此，在 Moz 和 WebKit 浏览器中，这可以正常工作。类被应用并且背景图像相应地改变。也适用于 IE7。然而，在 IE6 中，背景图像永远不会改变。这些类得到了适当的应用，我用 MS 的网络开发工具中的 DOM 查看器验证了这一点。所以，jQuery 正在工作。正在应用该类，但没有明显的变化。

我在这里有点难过...帮助我，Crackoverflow...你是我唯一的希望...

编辑:至于 className 与 setAttribute ......类正在改变。 attr("class", cur) 正在工作。然而，一旦类发生变化，生成的规则并没有在视觉上应用......但类的变化正在发生。

编辑 2:至于jQuery的class-specific methods:我本来在代码里有的，结果也是一样的。同样，问题不在于类未应用于元素……这已被证实正在发生。一旦类在元素上，由于某种原因，元素不遵循为该类设置的 CSS 规则......

Answer 1

猜测一:渲染bug 1

确保您已在元素上触发了 hasLayout。你可以通过给它们一个高度来做到这一点，或者，如果这不是一个可能性，那么 position = relative & z-index = 1，也会触发 hasLayout。尝试对这些元素 + 可疑的父元素。

/* fix hasLayout bug for IE */
div#id {
  _height : 0;
  min-height : 0;
}

猜测二:渲染bug 2

有时，可能需要强制执行比浏览器决定的更多的渲染计算。你可以通过触摸 body 类给 DOM 一个很好的踢:

document.body.className += '';

猜测三:选择器问题

IE6 不支持多个类选择器，除了某些情况下可能不支持 ID+Class。

div.class1.class2 {
  border : 1px solid red; /* this will normally not work in IE6 */
}

我目前没有 IE 来测试，不记得天气#id.class 应该工作(我觉得应该)，但我通常避免 IE6 的任何此类事情。您可能需要更改选择器。

您需要设置测试以查看您的选择器是否正常工作。

可能有效的变体:

.inv#chooser_nav { background-position : 0 -114px; }

或者您可能需要将元素从父元素中分离出来:

#someparent .inv { background-position : 0 -114px; }

IE6 还存在悬停问题，因此这也可能是一个因素。

希望这对您有所帮助。很抱歉，我不能更确定，但克服 IE6 的怪癖主要是通过反复试验、蛮力、猜测和慷慨的耐心帮助来完成的。