IE上的css選擇器

我在使用.class1.class2 .class3選擇器，其中.class1.class是組合選擇器，而.class3屬於後代。在FF中工作正常，但在IE7上，它不起作用。在下面的CSS中，第二個樣式總是在IE中顯示。任何解決方案IE上的css選擇器

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

來源

2010-03-29 user121196

您可以執行'.test1 .test3'選擇器或'.test2 .test3'，除非您需要排除組合，您是否可以重新排序，或者是父代的工作方式，還是必須是組合？ – 2010-03-29 21:24:11

它需要組合 – user121196 2010-03-29 21:39:00

該樣式應該在IE7 +上完美運行。正如Pekka在評論中說的那樣，有一個small problem with IE6。我猜你沒有使用嚴格的文檔類型？
_{在這種情況下，你應得的一切你：-o}

只需添加<!doctype html>到HTML文件的開始，一切都應該罰款。

來源

2010-03-29 21:43:16 DisgruntledGoat

好像每個人除了尼克誤解了這個問題，問題中的css是 .test1.test2 .test3 – user121196 2010-03-29 21:48:47

加入<！doctype html>的作品。但我已經在使用IE7，而不是IE6 – user121196 2010-03-29 22:44:49

對不起，如果我不清楚 - 嚴格的文檔類型是使它在IE7中工作。不確定你在第一條評論中的含義;我知道CSS是什麼。 IE的問題是在一個元素上使用兩個類，即'.test1.test2'部分 – DisgruntledGoat 2010-03-29 23:12:44

使用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]-->

這意味着所有IE系列瀏覽器少於9版本會在這種風格的閱讀，或者你可以使用帶＃的樣式，像這樣通過IE讀取：

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

來源

2010-03-29 21:25:07 ant

但是爲什麼？我仍然不明白爲什麼IE首先會出錯。 – 2010-03-29 21:29:56

但是您提供的示例不是組合，我將.test1.test2作爲組合，而.test3屬於後代。 – user121196 2010-03-29 21:43:04

只是爲了讓你知道，你正在使用什麼叫多種類方法！ IE7需要使用這種形式：

div.class1.class2 div.class3 {}

IE6不suppurt這一點，你可以破解它，閱讀解決方案

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

希望這有助於！

來源

2010-03-29 22:08:32

IE上的css選擇器

回答

相關問題