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

我有一幅具有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,我有一系列基于上一个click事件的悬停规则(此处未声明的“ 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+"inv");
  },cur);
  });

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

因此,在Moz和WebKit浏览器中,这可以正常工作.将应用这些类,并且背景图像将相应更改.也可以在IE7中使用.但是,在IE6中,背景图像永远不会改变.这些类得到了适当的应用,我在MS的Web开发工具中使用DOM查看器对此进行了验证.因此,jQuery正在运行.正在应用该类,但是没有明显的变化.

我有点迷住了… Crackoverflow帮帮我…您是我唯一的希望…

编辑：
至于className和setAttribute …,该类正在更改. attr(“ class”,cur)正在工作.但是,一旦更改了类,生成的规则就不会在视觉上应用…而是发生了类更改.

编辑2：
至于jQuery的特定于类的方法：我最初在代码中包含了它们,结果是相同的.同样,问题不在于类没有被应用到元素上……这已经被证实正在发生.这是因为一旦将类放在元素上,由于某种原因,元素就不会遵循为该类设置的CSS规则…

最佳答案

猜一：渲染错误1

确保已在元素上触发hasLayout.您可以通过给他们一个高度来实现,或者,如果这不是一个可能,那么position = relative& z-index = 1,也会触发hasLayout.尝试对这些元素怀疑父元素.

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

猜猜二：渲染错误2

有时,可能有必要强制进行比浏览器决定更多的渲染计算.您可以通过触摸body类来给DOM一个好的踢法：

document.body.className += '';

猜三：选择器问题

IE6不支持多个类选择器,某些情况下可能不支持ID类.

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的怪癖,很大程度上是通过良好的旧尝试和错误方法,蛮力,猜测以及慷慨的耐心帮助.

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

相关文章