Question

我正在使用.class1.class2 .class3选择器，其中.class1.class是组合选择器而.class3属于后代。在FF中工作正常，但在IE7上，它不起作用。在下面的CSS中，第二种样式总是在IE中显示。任何解决方案？

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

Answer 1

只是为了让您知道，您使用的是多个类方法！ IE7 需要使用此表单：

div.class1.class2 div.class3 {}

IE6 不支持这个你可以破解它，阅读解决方案

http://www.quirksmode.org/css/multipleclasses.html

希望这有帮助！

Answer 2

该风格应该在IE7 +上完美运行。正如佩卡在评论中所说，有small problem with IE6。我猜你也许没有使用严格的doctype？
_{在这种情况下，你应得的一切：-o}

只需将<!doctype html>添加到HTML文件的开头，一切都会正常。

Answer 3

使用Conditional Comments，这个问题引发了太多次，这是一个例子：

<!--[if lte IE 9>
<style type="text/css">
.test1,.test2,.test3{
    width:90px;
    height:100px;
}
.test4,.test2,.test3{
    width:900px;
    height:100px;
}
</style>

<![endif]-->

这意味着所有低于版本9的IE家族浏览器都会以这种方式阅读，或者您可以使用带＃的样式来通过IE阅读：

<STYLE type="text/css">
.test1,.test2,.test3{
    #width:90px;
    #height:100px;
}
.test4,.test2,.test3{
    #width:900px;
    #height:100px;
}
</style>

IE上的css选择器

3 个答案: