我在HTML網站中的導航按鈕在Chrome和Firefox中呈現，但不是在Safari中呈現？

在這里，我的網站導航欄在 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://toxicflame427.xyz 。

uj5u.com熱心網友回復：

發生這種情況是因為您的button元素具有15%高度，并且 Safari 和其他瀏覽器處理按鈕內溢位的方式不同。

只需洗掉高度限制（或將其設定得更大），它就會起作用。

另外，請注意：在兩種瀏覽器中，按鈕都沒有覆寫其內容，這不是一個好習慣。另外，沒有指定高度的元素內的百分比高度a也不好。

標籤：html css 网络

上一篇：網頁如何將通知數量放在頁面選項卡圖示內？

下一篇：使Web服務器運行腳本