Question

我的HTML中有以下DIV，其中包含大量背景图像：

<div id="widget-image" class="tyreinfo1"></div>

根据选择页面上表单上的选择框，背景图像将滚动到不同的点。这些职位定义如下：

#widget-image.tyreinfo1 { background-position: 0px -105px }
#widget-image.tyreinfo2 { background-position: 0px -210px }
#widget-image.tyreinfo3 { background-position: 0px -315px }
#widget-image.tyreinfo4 { background-position: 0px -420px }
#widget-image.tyreinfo5 { background-position: 0px -525px }

选择框上的代码是：

onfocus="$('#widget-image').removeClass().addClass('tyreinfo1');"

5个选择框，每个框添加一个不同的tyreinfo类。

惊喜，惊讶它不适用于IE6。我已经使用调试工具栏进行了检查，但是肯定会应用这些类，但每次背景位置都会重置为0px 0px。

任何帮助表示赞赏！

Answer 1

首先手动编写html和css以检查CSS是否正常工作，我怀疑这是由IE6的错误CSS实现引起的。

我想你是在＃widget-image上设置背景图片（非常合理），但IE6会将'＃widget-image.tyreinfo1'读作'.tyreinfo1'（完全有缺陷），这意味着#widget上的定位 - 图像优先。你可以试试

#widget-image.tyreinfo1 { background-position: 0px -105px !important }

但你可能最好为每个班级设置完整的背景风格。

Answer 2

试试这个：您只是简单地指定了.removeClass（），您没有指定要删除的类。我想你试图删除现有的类并添加一个新的类。所以这就是我的建议。

$('#widget-image').removeAttr('class').addClass('tyreinfo1');

Answer 3

您使用的是PNG和PNG修复程序脚本吗？如果是这样，后台定位将无法在IE6中运行。每次更新位置时，您还必须添加图像URL。

Answer 4

我同意@Inrbob。首先写出CSS以确保它以这种方式工作。然后，如果是，那么试试这个：

你有选择权吗？为每个选择一个id。然后附加一个单独的javascript文件，并使用ID调用它。

$('#id1').click(function() {
  $('#widget-image').removeAttr('class').addClass('.whatever');
});

你也可以尝试另一种方式，即使用焦点（）。

$('#id1').focus(function() {
  $('#widget-image').removeAttr('class').addClass('.whatever');
});

我怀疑任何解决方案都应该有效。

如果没有，那么我建议您使用http://jsfiddle.net发布整个HTML和CSS，并让我们仔细查看整个情况。

祝你好运。

Answer 5

也许是因为你的css定义缺少分号;

#widget-image.tyreinfo1 { background-position: 0px -105px; }

否则，您可以尝试通过更改属性的值来更改类，例如：

onfocus="$('#widget-image').attr('class','tyreinfo1');"

在某些情况下这对我有用，其他方法也失败了。但是，发布一些示例代码可能会有所帮助。

使用addClass（）在IE6中未应用的类

5 个答案: