开发者

css selector on IE

开发者 https://www.devze.com 2022-12-24 08:16 出处:网络
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.

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

精彩评论

暂无评论...
验证码 换一张
取 消