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

私はこのコードに関係していると思う：

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

あなたが.dropdown:hoverを追加した場合はどうなりますか？それは役に立ちますか？また、CSSでその他の問題が発生している可能性があります。!importantを追加してみてください。別のノートで

、あなたは、Firefoxまたは唯一のオペラだけでトラブルを抱えている場合、あなたはそれぞれの特定のブラウザのコードのCSSに、このような何かを行うことができます（あなたがより良い問題を知っていれば役に立つかもしれ）

FireFoxの

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

私はなぜあなたの特定のセットアップがうまくいかないのか分からないが、それをやるより良い方法がある。

まず、すべてのリストを使って何をやっているのかを確認するのが一般的には良い方法です。あなたはdiv要素としてdropcontrolを維持する必要がある場合、あなたはdropdownのdivを削除し、ULタグにdropdownクラスを与えることによって、あなたが持っているものをクリーンアップすることができ、

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

：だからあなたのようなものを持っていると思います。

また、正確に何をしようとしているかに応じて、<select>要素も良い選択肢です。

出典

2011-07-06 13:49:40 Shauna

私はここでHTMLレイアウトが好きですが、CSSはまだ壊れています。私が前に述べたように、古いFFを使用していますが、一部の同僚も問題を抱えているので、どのバージョンにいるかを調べる必要があります。 – zchtodd

ここでは、Firefox用の1つのソリューションです。私は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が動作する方法を変更する理由は全くわからないんだけど、その答えは、XHTML-移行などのdoctypeタグを含めることでした。

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

これは間違いなくquirksモードと関係があります。 – BoltClock

CSS疑似クラス継承

答えて

関連する問題