CSS僞類繼承

我想知道爲什麼我的CSS在Opera中運行，但不在Firefox中運行。我所追求的效果只是一個按鈕，當它懸停時，會顯示一個下拉菜單。CSS僞類繼承

<html> 
<head> 

<style> 

.dropcontrol { 
    background-color: red; 
} 

.dropdown { 
    display: none; 
} 

.dropcontrol:hover .dropdown { 
    display: block; 
} 

</style> 

</head> 
<body> 

<div class='dropcontrol'>TEST 

    <div class='dropdown'> 

     <ul> 

      <li>Test 1</li> 
      <li>Test 2</li> 
      <li>Test 3</li> 

     </ul> 

    </div> 

</div> 
</body> 
</html>

問題似乎是.dropcontrol:hover .dropdown。任何想法爲什麼這將在Opera中工作，但不是Firefox？

謝謝你的時間。

來源

2011-07-06 zchtodd

此代碼的工作對我來說，是FF5，IE7/8/9。你運行的是哪個版本的Firefox？ – Graham

在3.5.9上爲我破碎。也發生了一些同事，我將不得不找出他們正在使用的版本。 – zchtodd

我認爲這與該代碼做：如果你添加.dropdown:hover

.dropcontrol:hover .dropdown { 
    display: block; 
}

會發生什麼？這有幫助嗎？你也可能會得到一些其他問題與CSS，嘗試添加!important，這也可以幫助。

在另一方面，如果你只用Firefox或只有Opera遇到問題時，可以爲每個特定的瀏覽器做這樣的事情代碼CSS（可能會有所幫助，一旦你更好地瞭解這個問題）

火狐

@-moz-document url-prefix() { 
    #someID { 
     position: relative; 
     top: -1px; 
    } 
}

歌劇

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 
    #my-id { clear:right; } 
}

來源

2011-07-06 13:49:32

'.dropdown：hover'假定'dropdown'正在被徘徊，如果它開始隱藏並且沒有被顯示，這是不可能的。另外，-1跳轉到黑客。 – Shauna

我不知道爲什麼你的特定設置不起作用，但有更好的方法去做。

對於初學者來說，對所有列表進行操作通常是一個更好的主意。所以，你必須是這樣的：

<ul class="dropcontrol"> 
    <li>Test 
    <ul class="dropdown"> 
     <li>Test 1</li> 
     <li>Test 2</li> 
     <li>Test 3</li> 
    </ul> 
    </li> 
</ul>

如果你必須保持dropcontrol作爲一個div，那麼你可以通過刪除dropdown DIV並給予UL標籤的dropdown類清理自己擁有什麼。

此外，取決於您正在嘗試做什麼，<select>元素也可能是更好的選擇。

來源

2011-07-06 13:49:40 Shauna

我喜歡這裏的HTML佈局，但CSS仍然存在問題。正如我上面提到的，我使用的是過時的FF，但有些同事也有問題，所以我必須找出他們的版本。 – zchtodd

這是一個firefox解決方案。我從來沒有使用Opera，我從來沒有看到過你嘗試過的方式發佈它。我通常這樣做。

.dropcontrol { 
background-color: red; 
} 

.dropcontrol li ul { 
visibility:hidden; 
} 

.dropcontrol li:hover ul { 
visibility:visible; 
} 


<div class='dropcontrol'><ul><li>TEST 

    <ul> 

     <li>Test 1</li> 
     <li>Test 2</li> 
     <li>Test 3</li> 

    </ul> 
</li></ul> 

</div>

來源

2011-07-06 14:01:24 Pamela

好吧，我不完全知道爲什麼，這改變Firefox的工作方式，但得到的答覆是，包括DOCTYPE標籤爲XHTML的過渡。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">

來源

2011-07-06 14:11:01 zchtodd

這絕對與怪癖模式有關。 – BoltClock

回答

相關問題