代码之家 › 专栏 › 技术社区 › Steve Paulo

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

cross-browser internet-explorer-6 css html jquery

Steve Paulo · 技术社区 · 16 年前

我有一个有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;}

  $("#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。。。你是我唯一的希望。。。

就类名和setAttribute而言。。。班级在变。attr(“类”,cur)正在工作。但是,一旦类被更改,生成的规则就不会被可视化地应用。。。但是阶级的变化正在发生。

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

5 回复 | 直到 16 年前

Borgar 16 年前

猜测一:渲染错误1

/* 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了。这门课应该有用(我觉得应该),但对于IE6,我一般都会避免这样的事情。您可能需要更改选择器。

您需要设置一个测试来查看选择器是否工作正常。

可能起作用的变化:

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

或者,您可能需要由父级将元素单选出来:

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

希望这有帮助。很抱歉,我不能说得更清楚,但要克服IE6的怪癖,主要是靠老套的试错法、蛮力、猜测和慷慨的耐心来完成的。

Magnar 16 年前

IE6在你使用的“double”css规则上有问题。

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

您正在选择ID为的元素 chooser_nav 班 bts . 这个(非常有用的)构造在IE6中是不可靠的。如果您可以删除ID说明符,或者改为以父元素为目标,则可以解决您的问题:

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

或

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

Kornel 16 年前

className DOM属性。 setAttribute() 在IE<8中完全崩溃。

s-andringa s-andringa 16 年前

结果与DD_belatedPNG库发生冲突。

user176992 user176992 15 年前

基本上,我是在父元素上更改一个类,以隐藏一些元素并显示其他元素。

我注意到这只发生在某些情况下(上帝只知道如何预测)。

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