我正在嘗試用bulma(一個(gè)CSS庫)寫一個(gè)navbar，這是我的代碼，它復(fù)制了bulma模板。

<nav class="navbar">
    <div class="container">
        <div class="navbar-brand">
            <a class="navbar-item" href="../">
                <img src="https://bulma.io/images/bulma-logo.png" alt="Logo">
            </a>
            <span class="navbar-burger burger" data-target="navbarMenu">
            </span>
        </div>
        ...
    </div>
</nav>

的CSS代碼。容器是:

.navbar>.container {
    display: flex;
    width: 100%;
}

@media screen and (max-width: 1023px) {
    .navbar>.container {
        display: block;
    }
}

我想是的。容器是屏幕寬度≤ 1023px的塊，應(yīng)該是這樣的。

屏幕寬度= 1022像素時(shí)的導(dǎo)航條

但是在屏幕寬度= 1023px時(shí)，它看起來是這樣的

屏幕寬度= 1023像素時(shí)的導(dǎo)航條

devtools顯示navbar的寬度是1023.2px，我想這就是問題的原因。

屏幕寬度= 1023像素時(shí)導(dǎo)航欄的寬度

我嘗試了不同的瀏覽器(Edge、Chrome、Firefox)，結(jié)果都一樣。

我用的是2K屏幕，所以我試著把分辨率設(shè)為1080p，現(xiàn)在navbar工作正常。

1080p分辨率下屏幕寬度= 1023像素時(shí)的導(dǎo)航條

除了更改分辨率，還有其他方法可以修復(fù)嗎？

我的代碼的代碼筆鏈接:https://codepen.io/ToddZZF/pen/mdQyLNG.

這一期顯示了我遇到的相同問題，并表示將max-width: 1023px更改為max-width: 1023.9px可以修復(fù)它。

現(xiàn)在在想多出來的0.2px哪來的？