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

Posted 2023-05-08

【中文标题】更改类不会导致在 IE6 中应用新类的规则？

【英文标题】：Change of class does not result in the new class's rules being applied in IE6?

【发布时间】：2010-09-17 19:26:30

【问题描述】：

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

【问题讨论】：

重新。 className vs. setAttribute，问题可能是 IE 中的一个错误，当您设置类属性时，它实际上并没有改变元素类，只有当您调用类特定方法时。也就是说，jQuerys 类方法（例如 addClass）使用这个。

【参考方案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 的怪癖，很大程度上是通过反复试验、蛮力、猜测和慷慨的耐心帮助来完成的。

【参考方案2】：

IE6 与您使用的“双”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;

【参考方案3】：

使用className DOM 属性。 setAttribute() 在 IE

【参考方案4】：

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

原来是与 DD_belatedPNG 库冲突。

【讨论】：

您能详细说明一下吗？我遇到了同样的问题，并且也在使用 DD_belatedPNG 库，所以我想这与您遇到的问题相同。你有没有设法解决它？如果有，怎么做？

没关系，我自己整理的。万一其他人遇到这个，我写了一篇关于它的快速博客文章：iandevlin.com/blog/2010/04/webdev/…

【参考方案5】：

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

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

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

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