Question

我试图理解为什么我的CSS在Opera中运行，但在Firefox中则不行。我所追求的效果只是一个按钮，当悬停在上面时，会显示一个下拉菜单。

<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的任何想法？

感谢您的时间。

Answer 1

我不确定为什么你的特定设置不起作用，但有更好的方法去做。

对于初学者来说，通常更好的做法是对所有列表进行操作。所以你有类似的东西：

<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>元素也可能是更好的选择。

Answer 2

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

Answer 3

好的，我不完全确定为什么这会改变Firefox的工作方式，但答案是将doctype标记包含为xhtml-transitional。

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

Answer 4

我认为这与此代码有关：

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

如果添加.dropdown:hover会怎样？这有帮助吗？您可能还会遇到其他一些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; }
}

CSS伪类继承

4 个答案: