I'm using .class1.class2 .class3 selector, where .class1.cla开发者_运维技巧ss is a combination selector and .class3 belongs to a descendant. works fine in FF, but on IE7, it doesn't work. In the css below, the second style is always shown in IE. any solution?
<STYLE type="text/css"> .test1.test2 .test3{ width:90px; height:100px; } .test4.test2 .test3{ width:900px; height:100px; } </style> <div class="test1 test2"> <button value="test" class="test3"/> </div>
just for let you know, what you are using is called Multiple Classes method! IE7 need to use this form:
div.class1.class2 div.class3 {}
IE6 don't suppurt this you can hack it, read the solution
http://www.quirksmode.org/css/multipleclasses.html
hope this help!
That style should work perfectly on IE7+. As Pekka said in the comments there is a small problem with IE6. I'm guessing that you're not using the strict doctype perhaps?
In which case, you deserve everything you get :-o
Just add <!doctype html>
to the start of the HTML file and everything should be fine.
Use Conditional Comments , this issue has been raised too many times here is an example :
<!--[if lte IE 9>
<style type="text/css">
.test1,.test2,.test3{
width:90px;
height:100px;
}
.test4,.test2,.test3{
width:900px;
height:100px;
}
</style>
<![endif]-->
This means all IE family browser less than version 9 are going to read in this style, or you can use style with # to be read by IE like this :
<STYLE type="text/css">
.test1,.test2,.test3{
#width:90px;
#height:100px;
}
.test4,.test2,.test3{
#width:900px;
#height:100px;
}
</style>
精彩评论