CSS - 为什么这在 Firefox/IE/Chrome 中表现不同？答案

【问题标题】：CSS - Why does this behave differently in Firefox/IE/Chrome?CSS - 为什么这在 Firefox/IE/Chrome 中表现不同？
【发布时间】：2017-01-05 09:51:03
【问题描述】：

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

Internet Explorer 在下拉菜单之间添加了几个像素，因此您必须快速移动光标，否则它会消失
Chrome 将子菜单重叠显示，使它们无法使用

该网站是omartahir.com（是的，去我吧！）如果您将鼠标悬停在“编程”上，然后是其中一个子菜单，例如，下拉菜单就会出现。 'C++' - 在 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>

谢谢！

【问题讨论】：

在不浏览代码的情况下，您可能希望从 Normalize 之类的东西开始，以使所有浏览器呈现相同的元素。 necolas.github.io/normalize.css
好的，我尝试使用它，但它弄乱了 Firefox 和 Chrome 的一些布局，但没有解决问题。似乎它不起作用。 :(

标签： css cross-browser

【解决方案1】：

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

我的网站有问题。当我打开该网站时，它在 Chrome 中的行为很奇怪。但是 Firefox 和 Safari 都可以。我解决了这个问题。所以想分享：

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

禁用扩展（在 chrome 中 - 更多工具 --> 扩展 --> 禁用）。清除浏览器历史记录（这对我有帮助）
打开一个网站。

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

【讨论】：