IE ignoring class="" problem_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-26 06:25 出处：网络

I have a complex web page (JavaScript application) where an included style sheet contains the following rule:

.floatleft {
  float: left;
  mar开发者_StackOverflowgin-right: 10px;
}

Within that complex layout there is a DIV element:

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

My problem is that IE9 (quirks mode) is ignoring the floatleft class. In fact, Firebug lite says: This element has no style rules..

Other rules on the page work fine and FireFox, Chrome show the correct layout.

Some more insights:

This is not related to float:left since a border:1px solid red doesn't show up either.
The DIV parent's parent has also another class attribute that works.
A nested child of the problematic DIV also has a working class attribute.
An inline style="float:left" works.
removing the width attribute doesn't help
full CSS code is available here: http://pastebin.com/1JAATMZD

Unfortunately I can't reproduce the problem in a simplified test case (in fact the same rule works fine in another application) and I can't give you an URL to see the problem since it's an application with restricted access.

I'd be happy anyway if someone could give me some more hint how to spot the problem. AFAIK Internet Explorer is known to mess up with style rules sometimes.

I was faced the same problem today in IE7.

I have a <div> element created in Javascript. I wanted to style it using a CSS class, but I found that IE7 didn't apply the style for my <div>.

(If I'll create the <div> directly in HTML without Javascript, IE7 will apply correctly the CSS class on my element).


<!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>

I actually found that setAttribute() works very buggy in IE7 when it is used to set the class name of an Element.

The real solution for my code is to use className property instead of setAttribute().


childDiv.className = "childDiv";

~~The solution I found so far is to use an ID attribute instead of Class:~~

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

and

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

or to refer my <div> using the parent's ID:

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