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的web开发工具中的DOM查看器验证了这一点。所以，jQuery正在运行。该课程正在应用，但没有明显的变化。

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

编辑：就className与setAttribute而言......类正在改变。 attr（“class”，cur）正在工作。但是，一旦更改了类，结果规则就不会在视觉上应用......但是类的更改正在发生。

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

Answer 1

猜猜一：渲染错误1

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

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

猜猜两：渲染错误2

有时，可能需要强制进行比浏览器决定更多的渲染计算。你可以通过触摸身体类来给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的怪癖主要是通过好的旧试错方法，蛮力，猜测和慷慨的耐心来完成的。

Answer 2

IE6在您使用的“双”css规则方面存在问题。

#chooser_nav.bts {background-position:0 -228px;}

您正在选择ID为chooser_nav 和类bts的元素。这个（非常有用的）构造在IE6中不可靠。如果你可以删除ID-specifier，或者改为定位父元素，那么应该解决你的问题：

.bts {background-position:0 -228px;}

或

#chooser_nav_parent .bts {background-position:0 -228px;}

Answer 3

使用className DOM属性。 IE中完全打破setAttribute()＆lt; 1 8。

Answer 4

我遇到了类似的问题;应用了类名，文本colot按预期更改，但背景图像没有立即更新。在我跳过或离开实际元素后，背景已更新。

事实证明这与DD_belatedPNG库存在冲突。

Answer 5

我在ie7中遇到了这个问题。

基本上我正在改变父元素上的一个类来隐藏一些元素并显示其他元素。该类已更改，并且在加载页面时显示的元素正在隐藏并显示正常，但页面加载时未显示的元素从未显示过。

我注意到这只发生在某些场景中（上帝只知道预测它）。

我的解决方案是仅在页面加载javascript后隐藏元素。

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

5 个答案: