Question

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

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

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

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

我的问题是IE9（ quirks mode ）忽略了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来查看问题，因为它是一个限制访问的应用程序。 / p>

如果有人能给我一些如何发现问题的暗示，我会很开心。众所周知，AFAIK Internet Explorer有时会混淆样式规则。

Answer 1

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

我有一个＆lt; div＆gt;在Javascript中创建的元素。我想使用CSS类来设置它的样式，但我发现IE7没有为我的＆lt; div＆gt;应用样式。

（如果我在没有Javascript的情况下直接在HTML中创建＆lt; div＆gt;，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");

或引用我的＆lt; div＆gt;使用父母的ID：

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

<击>

IE忽略了class =“”的问题

1 个答案: