Question

我有一个纯CSS多层下拉菜单（疯狂，我知道）虽然它在Firefox中完美运行，但当我的朋友使用其他浏览器检查网站时，它有点搞砸了：

Internet Explorer在下拉菜单之间添加几个像素，因此您必须快速移动光标或消失
Chrome通过在彼此之上显示子菜单使其无法使用

该网站为omartahir.com（是的，转发我！）如果您将鼠标悬停在“编程”上，则会显示下拉菜单。然后是子菜单之一，例如＆＃39; C ++＆＃39; - 在IE浏览器中存在差距，在Chrome中，菜单不会出现在旁边，而是直接向下移动！

有人能说清楚为什么会这样吗？我根本没有跨浏览器兼容性或它们之间的差异：（

这里是CSS（对不起有这么多！）：

.navbutton
{
    color:#BBBBBB;
    background-color:rgba(255, 255, 255, 0.85);
    text-align:center;
    font-size:18px;
    display:inline-block;
    width:120px;
    height:45px;
    padding-top:17px;
    padding-left:5px;
    padding-right:5px;
    transition:all 0.3s;
    position:relative;
    z-index:1;
}

.navbutton2line
{
    height:55px;
    padding-top:7px;
}

.navbutton:hover, #navbuttonselected:hover
{
    color:#111111;
    transition-delay:0s;
}

#navbuttonselected
{
    color:#FFFFFF;
    background-color:#00A2E8;
}

/* CSS Dropdown Menu */

/* Programming */
#programming
{
    display:inline-block;
}

#programming > div
{
    display:none;
}

#programming:hover > div
{
    display:block;
    position:absolute;
}

/* /programming/cpp */
#cpp
{
    display:inline-block;
}

#cpp > div
{
    display:none;
}

#cpp:hover > div
{
    display:inline-block;
    position:absolute;
}

/* /programming/web */
#web
{
    display:inline-block;
}

#web > div
{
    display:none;
}

#web:hover > div
{
    display:inline-block;
    position:absolute;
}

/* /programming/python */
#python
{
    display:inline-block;
}

#python > div
{
    display:none;
}

#python:hover > div
{
    display:inline-block;
    position:absolute;
}

/* /programming/basic */
#basic
{
    display:inline-block;
}

#basic > div
{
    display:none;
}

#basic:hover > div
{
    display:inline-block;
    position:absolute;
}

HTML：

<div id="navbar">
            <a href="/index.php" class="navbutton" id="navbuttonselected">Home</a
            ><a href="/about.htm" class="navbutton">About Me</a
            ><div id="programming"><a href="/programming.htm" class="navbutton">Programming</a>
                <div>
                    <div id="cpp"><a href="/programming/cpp.htm" class="navbutton">C++</a>
                        <div>
                            <div><a href="/programming/cpp/shooter.htm" class="navbutton navbutton2line">Shooter Game</a></div>
                            <div><a href="/programming/cpp/invoker.htm" class="navbutton navbutton2line">Invoker Practice</a></div>
                            <div><a href="/programming/cpp/gameoflife.htm" class="navbutton">Game of Life</a></div>
                        </div>
                    </div>
                    </br>
                    <div id="web"><a href="/programming/web.htm" class="navbutton navbutton2line">Web Development</a>
                        <div>
                            <div><a href="/programming/web/site.htm" class="navbutton">This Site</a></div>
                            <div><a href="/programming/web/coursework.htm" class="navbutton">Coursework</a></div>
                        </div>
                    </div>
                    </br>
                    <div id="python"><a href="/programming/python.htm" class="navbutton">Python</a>
                        <div>
                            <div><a href="/programming/python/p1.htm" class="navbutton">p1</a></div>
                            <div><a href="/programming/python/p2.htm" class="navbutton">p2</a></div>
                        </div>
                    </div>
                    </br>
                    <div id="basic"><a href="/programming/basic.htm" class="navbutton">SuperBASIC</a>
                        <div>
                            <div><a href="/programming/basic/b1.htm" class="navbutton">b1</a></div>
                            <div><a href="/programming/basic/b2.htm" class="navbutton">b2</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

谢谢！

Answer 1

这是一个老问题，但没有人回答。

我的网站存在问题。当我打开网站时，它在Chrome中表现得很奇怪。但Firefox和Safari都可以。我解决了这个问题。所以想分享一下：

使用this创建CSS，没有不必要的东西。
尝试以隐身模式打开网站。如果它表现良好，那么您可以按照以下两个步骤进行操作：

停用扩展程序（在Chrome中 - 更多工具 - ＆gt;扩展程序 - ＆gt;禁用）。清除浏览器历史记录（这对我有帮助）
开设网站。

希望这会有所帮助。快乐编码:)

CSS - 为什么在Firefox / IE / Chrome中这种行为有所不同？

1 个答案: