html - 链接在 chrome 中有效，但在 firefox 中无效

Question

所以我正在为学校做评估，长话短说，要求之一是您的网站必须在两种浏览器(Chrome 和 Firefox)中运行。我的页面在两者中都工作正常，但我的导航按钮仅在 chrome 中工作，并且当我在 Firefox 中测试它们时返回错误“协议(protocol) (h) 未与任何程序关联或在此上下文中不允许”。它还提示我可能需要安装其他软件才能打开此地址。

我的代码如下。

<div id="menu">
    <a href="H:/documents/200dts/web_design/scoville_scale/index.html">Home</a>
    <div class="dropdown">
        Content
        <div class="dropdown-content">
            <a href="H:/documents/200dts/web_design/scoville_scale/pages/scoville_scale.html">The Scoville Scale</a>
            <a href="#">Page 2</a>
            <a href="#">Page 3</a>
        </div>
    </div>
    <a href="#">About Us</a>
    <a href="#">Gallery</a>
</div>

这是我的 CSS。

/* Navigation Bar */
#menu {
    position: fixed;
    top: 0;
    width: 100%;
    color: #ffffff;
    height: 35px;
    text-align: center;
    padding-top: 15px;
    -webkit-box-shadow: 0px 0px 8px 0px #000000;
    -moz-box-shadow: 0px 0px 8px 0px #000000;
    box-shadow: 0px 0px 8px 0px #000000;
    background-color: #2f040c;
}

#menu a {
    font-size: 14px;
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    text-decoration: none; 
}

#menu a:hover {
    color: grey;
} 

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #2f040c;
    min-width: 80px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: grey;
    padding: 16px 18px;
    text-decoration: none;
    display: block;
}

.dropdown:hover .dropdown-content {   
    display: block;
}

Answer 1

您需要使用 file:/// 将路径附加到文档，如下所示:

href="file:///H:/documents/200dts/web_design/scoville_scale/pages/scoville_scale.html"

查看 JSFiddle ，以及维基百科页面 File URI Scheme

This question在 support.mozilla.org 上也可能对您有用

---

它说 protocol(h) 不存在的原因是因为它认为驱动器号是 protocol (如 http、https 和 ftp)。

所以它认为 H:/ 是另一种通过互联网访问数据的方式。