Question

我知道标题看起来可能已经问过这个问题，但经过大量搜索后，我找不到答案，所以我问这个问题。我在其他几个地方也找到了，但我找不到合适的解决方案。我想，我可以在这里得到帮助。

我有一个输入类型的文本框字段，我使用javascript动态添加一个div。这个div有一个class =“errorFieldIcon”属性。我在我的css文件中有这个类定义。

当我尝试在IE7开发人员工具中调试它时，我发现此类的代码反映在“样式”选项卡中。但是，当我看到页面时，样式效果没有反映在页面上。我注意到，如果我只是去开发人员工具并取消选中/检查样式选项卡中的任何CSS属性，我就能看到这个图像。

这对我来说非常令人惊讶，因为我第一次注意到这样的问题。每当加载页面时它都不会显示图像/图标，但是当我取消选中或检查任何CSS属性时，它会开始显示图像。

我的班级代码是

.errorFieldIcon{
    background-image: url("../images/IcoMessageError.gif");
    height: 16px;
    left: -18px;
    position: absolute;
    top: 3px;
    width: 16px;
}

.errorFieldIcon {
    background-image: url("../img/ico_error.png");
    background-repeat: no-repeat;
}

代码

<TD class="DefaultFontBlack errorHighlight" vAlign=center colSpan=2 align=left>
 <DIV id=etvErrIcon class=errorFieldIconOwner>
  <DIV class=errorFieldIcon>
  </DIV>
 </DIV>
 <INPUT value=123# type=text name=SITE_DK_NUMBER_RULE>
</TD>

如果您需要更多信息，我可以提供。由于我在本地运行它，我无法提供链接。但我觉得这种描述应该足够了。

Answer 1

当它出现错误的HTML时，IE7非常“挑剔”。如果您使用正确的HTML，可以更正许多错误，停止浏览器进入quirks mode。

用户小写HTML，引用您的属性，使用doctype。

检查您的CSS，为同一元素/类设置2个图像，因此根据您提供的CSS，您将只看到最后一个：

.errorFieldIcon {
  background-image: url("../img/ico_error.png");
  background-repeat: no-repeat;
}

在您的CSS中，position: relative是否有.errorFieldIconOwner，也许是因为绝对定位，您看不到图像？

IE7中的背景图像不会出现在加载中

1 个答案: