html - 使 Logo div 成为可点击的链接

Question

我有一个 Logo 和第二个元素，它们包含在导航中的 div 中，我想建立链接。尝试了一切。看起来 .logo svg div 正在链接，但正在运行 #topnav 的整个宽度，并且带有 .logo 的区域不可点击。关于 div 的 .nav 容器根本没有链接，我似乎无法让它在导航中正确对齐。

这里可能存在一些问题(对此深表歉意)，但如有任何建议，我们将不胜感激。

HTML

<div id="topbar">
        <a href="##">
            <div class="logo svg">
                <object class="logo" type="image/svg+xml" data="img/gf_logo_main.svg">
                </object>
            </div>
        </a>
        <a href="###">
            <div class="nav container about">
                <object class="nav about" type="image/svg+xml" data="img/question mark.svg">
                </object>
            </div>
        </a>
    </div>

CSS

    #topbar {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 65px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.8);
    color: #000;
}

.logo svg {
    float: left;
    width: 50px;
}

.logo {
    height: 80%;
}

.logo img {
    border: 0;
    display: none;
    height: 100%;
    width: 100%;
}

.nav container about {
    position: absolute
    right: 0px;
}

.nav link about{
    height: 80%;
    }

页面在这里:

http://www.glitteringfacade.com

Answer 1

您不需要使用 <object>不再是 SVG 的标签。 Since IE9 ，你可以像普通的一样内联它 <img> (但一定要指定其宽度和高度，作为属性或在 CSS 中)。

<a href="#" class="logo svg"><img src="img/gf_logo_main.svg"></a>