类不在IE6中使用addClass（） [英] Class not being applied in IE6 using addClass()

问题描述

我的HTML中有以下DIV，它包含一个大的背景图片：

I have the following DIV in my HTML which holds a large background image:

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

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

Depending on which select box on a form on the page is selected, the background image will scroll to a different point. These positions are defined like so:

#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类。

5 select boxes, each one adding a different tyreinfo class.

惊喜，惊喜它不工作在IE6。我已经使用调试工具栏检查，类肯定是应用，但是背景位置每次重置为0px 0px。

Surprise, surprise it's not working in IE6. I've checked using the debug toolbar and the classes are definitely being applied, however the background position resets to 0px 0px each time.

任何帮助赞赏！

推荐答案

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

manually write the html and css first to check if the CSS is working, I suspect that this is caused by IE6's buggy CSS implementation.

我想你是在＃widget-image（完全合理）设置背景图片，但IE6会读取'＃widget-image.tyreinfo1'作为'.tyreinfo1' （完美缺陷），这意味着＃widget-image的定位优先。您可以尝试

I imagine you are setting the background image on the #widget-image (perfectly reasonable) but IE6 will read '#widget-image.tyreinfo1' as '.tyreinfo1' (perfectly flawed) which means the positioning on the #widget-image takes preference. You could try

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

但您可能会更好地为每个类设置完整的背景样式。

but you might be better off setting the background style in it's entirety for each class.

这篇关于类不在IE6中使用addClass（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！