3

我有一张包含 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 规则......

4

5 回答 5

2

猜想一：渲染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 的怪癖，很大程度上是通过反复试验、蛮力、猜测和慷慨的耐心帮助的旧方法来完成的。

于 2008-10-18T15:19:10.027 回答
1

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

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

您正在选择具有 IDchooser_nav 和class的元素bts。这个（非常有用的）构造在 IE6 中并不可靠。如果您可以删除 ID 说明符，或者改为定位父元素，那应该可以解决您的问题：

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

或者

#chooser_nav_parent .bts {background-position:0 -228px;}
于 2009-03-04T13:52:51.967 回答
0

使用classNameDOM 属性。setAttribute()在 IE < 8 中完全崩溃。

于 2008-10-17T18:11:39.103 回答
0

我遇到了类似的问题；应用了类名，文本 colot 按预期更改，但是背景图像没有立即更新。在我将鼠标悬停在实际元素上或之外后，背景会更新。

原来是与 DD_belatedPNG 库发生冲突。

于 2009-03-04T13:48:11.307 回答
0

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

基本上我正在更改父元素上的一个类以隐藏一些元素并显示其他元素。类发生了变化，加载页面时显示的元素隐藏并显示正常，但加载页面时未显示的元素从未显示。

我注意到这只发生在某些情况下（上帝只知道预测它）。

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

于 2009-09-22T07:20:03.000 回答