我的 HTML 网站中的导航按钮可以在 Chrome 和 Firefox 中呈现，但不能在 Safari 中呈现？

Question

这里我遇到了一个问题，我的网站导航栏在 Chrome 和 Firefox 中呈现，但在 Safari 中根本不呈现。点击仍然有效，但我看不到按钮。

看这张图： Firefox 位于左侧，Safari 位于右侧。

这是导航栏的 HTML 代码：

<nav class="topbar">
    <div class="nav_graphics">
        <a href="https://play.google.com/store/apps/dev?id=4853083882678511028" target="_blank">
            <img class="toxic_flame_icon" src="/images/toxicflame427_icon.png" alt="ToxicFlame427 Icon"/>
        </a>
        <h1 class="title_header">ToxicFlame427</h1>
    </div>

    <div class="nav_buttons">
        <!--Link the different pages to the main site-->
        <a href="/index.html">
            <button>
                <h3>Home</h3>
            </button>
        </a>
        <a href="/pages/my_creations.html">
            <button>
                <h3>My Creations</h3>
            </button>
        </a>
        <a href="/pages/about.html">
            <button>
                <h3>About</h3>
            </button>
        </a>
        <a href="/pages/bug_report.html"  class="report_bug_button">
            <button>
                <h3>Report A Bug</h3>
            </button>
        </a>
    </div>
</nav>

这里也是它的 CSS：

@font-face {
    font-family: "ArcadeClassic";
    src: url("/font/ArcadeClassic.woff");
}

.topbar{
    padding: 10px;
    align-content: flex-start;
    width: 100%;
    height: wrap;
    background-color: black;
}

.nav_graphics{
    display: flex;
}

.nav_buttons{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.title_header{
    font-family: "ArcadeClassic";
    font-size: 2.0em;
    vertical-align: top;
    display: inline-block;
    color: teal;
    margin-left: 20px;
    margin-right: 20px;
}

.toxic_flame_icon{
    display: inline-block;
    height: 100px;
    transition: 1s;
}

.toxic_flame_icon:hover{
    transform: rotate(180deg);
}

.topbar button{
    font-size: 0.9em;
    transition: 0.25s;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    position: relative;
    bottom: 15px;
    border-radius: 5px;
    border-color: transparent;
    color: red;
    height: 15%;
    width: 130px;
    background-color: transparent;
    font-weight: bold;
    margin-top: 15px;
}

@media only screen and (max-width:600px){
    .topbar button{
        font-size: 0.8em;
    }

    .title_header{
        font-size: 1.7em;
    }
}

.topbar button:hover{
    color: turquoise;
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
}

/*Make sure that the little blue lines cant be seen*/
.topbar a{
    color: transparent;
}

它可能与字体有关吗？或者还有什么我没注意到的？

如果有人需要查看更多代码，该网站位于 https://有毒火焰427.xyz。

Answer 1

发生这种情况是因为您的 button 元素的高度为 15%，并且 Safari 和其他浏览器处理按钮内溢出的方式不同。

只需删除高度限制（或将其设置得更大）即可。

另外，附注：在两种浏览器中，按钮都没有覆盖其内容，这不是一个好的做法。另外，没有指定高度的 a 元素内的百分比高度也不好。