IE ignoring class="" problem
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:leftsince aborder:1px solid reddoesn't show up either. - The DIV parent's parent has also another
classattribute that works. - A nested child of the problematic DIV also has a working
classattribute. - An inline
style="float:left"works. - removing the
widthattribute 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;}
加载中,请稍侯......
精彩评论