IE 忽略 class="" 问题答案

【问题标题】：IE ignoring class="" problemIE 忽略 class="" 问题
【发布时间】：2011-10-20 15:43:06
【问题描述】：

我有一个复杂的网页（JavaScript 应用程序），其中包含的样式表包含以下规则：

.floatleft {
  float: left;
  margin-right: 10px;
}

在这个复杂的布局中有一个DIV 元素：

<div class="floatleft" width="25%">

我的问题是 IE9（怪癖模式）忽略了 floatleft 类。事实上，Firebug lite 说：This element has no style rules.。

页面上的其他规则工作正常，FireFox、Chrome 显示正确的布局。

更多见解：

这与float:left 无关，因为border:1px solid red 也不显示。
DIV 父级的父级还有另一个有效的class 属性。
有问题的 DIV 的嵌套子级也有一个有效的 class 属性。
内联 style="float:left" 有效。
删除 width 属性没有帮助
完整的 CSS 代码在这里：http://pastebin.com/1JAATMZD

很遗憾，我无法在简化的测试用例中重现该问题（事实上，相同的规则在另一个应用程序中也可以正常工作），并且我无法为您提供查看问题的 URL，因为它是一个访问受限的应用程序。

如果有人能给我更多提示如何发现问题，我会很高兴。众所周知，AFAIK Internet Explorer 有时会弄乱样式规则。

【问题讨论】：

div 有宽度属性吗？我觉得应该是style="width:25%;"
怪癖模式？难怪您在实际使用 IE5 时会遇到 IE 问题。将<!doctype html> 添加到标记的开头。
这条规则之前的 CSS 中有什么？可能是它以某种方式干扰它，例如如果前面的文本被解释为选择器的一部分。
它应该接受样式，否则您能否将您所做的作为链接发送，以便我们识别问题。
+1 宽度属性未出现在 HTML4 允许的属性集中。

标签： css internet-explorer internet-explorer-9

【解决方案1】：

我今天在 IE7 中遇到了同样的问题。

我有一个用 Javascript 创建的

元素。我想使用 CSS 类对其进行样式设置，但我发现 IE7 没有为我的

应用该样式。

（如果我直接在没有 Javascript 的 HTML 中创建

，IE7 将在我的元素上正确应用 CSS 类）。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>::</title>
    <style type="text/css">
      .childDiv{background:red;padding:10px;color:yellow;}
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var parentDiv = document.createElement("div");
      parentDiv.setAttribute("id", "parentDiv");

      var childDiv = document.createElement("div");
      childDiv.setAttribute("class", "childDiv");
      childDiv.appendChild(document.createTextNode("Hello IE7!"));

      parentDiv.appendChild(childDiv);
      document.body.appendChild(parentDiv);
    </script>
  </body>
</html>

我实际上发现 setAttribute() 在 IE7 中用于设置元素的类名时非常有问题。

我的代码的真正解决方案是使用 className 属性而不是 setAttribute()。


childDiv.className = "childDiv";

到目前为止我找到的解决方案是使用 ID 属性而不是 Class：


#childDiv{background:red;padding:10px;color:yellow;}

和


childDiv.setAttribute("id", "childDiv");

或使用父母的 ID 引用我的

：


#parentDiv div{background:red;padding:10px;color:yellow;}

【讨论】：