Html 为什么'；iPhone上的所有浏览器是否都显示此元素？

在响应模板中，当宽度低于某个像素阈值时，会出现一个名为navbar toggler的按钮。它适用于桌面上所有调整大小的浏览器，以及模拟移动设备的LT浏览器，但不适用于真正的iphone

在运行最新iOS的iPhone上的所有浏览器上，导航栏切换按钮都是不可见的，但是可以点击它应该位于的空间来显示侧边栏。如何使此元素显示在手机上

完整的代码可以下载。我相信这就是相关的css：

/* Hide the leftside bar */
@media (max-width: 991px) {
    .tm-sidebar {
        left: -280px;
        transition: all 0.3s ease;
    }

    .navbar-toggler {
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        background-color: rgb(0 102 153 / 0.80);
        color: white;
        padding: 10px 15px;
        transition: all 0.3s ease;
        border-radius: 0;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        top: 40px;
        z-index: 10000;
    }

    .navbar-toggler:focus { outline: none; }
    .tm-sidebar.show { left: 0; }
    .tm-sidebar.show .navbar-toggler { left: 280px; }

    .tm-parallax {
        width: 280px;
        left: -280px;
    }

    .tm-section-wrap {
        width: calc(100% - 280px);
        margin-left: 280px;     
    }

    .tm-section {
        padding-left: 30px;
        padding-right: 30px;
    }

    .tm-text-container { max-width: 100%; } 
}

@media (max-width: 700px) {
    .tm-parallax {
        position: static;
        height: 360px;
        width: 100%;
    }

    .tm-section-wrap {
        width: 100%;
        margin-left: 0;
    }
}

单击元素时，该js将添加show类：

$(".navbar-toggler").on("click", function(e) {
    $(".tm-sidebar").toggleClass("show");
    e.stopPropagation();
});

---

您可以尝试在容器上设置

overflow:visible

，如下所示：

.tm-sidebar{
    overflow:visible;
}

---

这可能是由于

固定

元素上的

溢出

实现不同所致。让我知道这是否有效。

“但是可以点击它来显示侧边栏”-如果它一开始没有显示，那么您点击的是什么？整个按钮是否没有显示？或者可能只是缺少了三行“汉堡”？该按钮的唯一内容似乎是一个令人敬畏的图标-这些图标在这些设备上通常在页面的其余部分工作吗？我正在点击我知道该按钮应该在的空间，它按预期工作：侧边栏出现。fa图标被广泛使用，并且它们都正确地显示在手机上。一件奇怪的事情是，如果我“捏”手机浏览器的力度足够大，那么我就可以看到fa条图标，但当我松开捏时，它会在全宽范围内闪烁一帧，然后消失。它可以工作！非常感谢你。很高兴听到你这么说。赏金可以结案吗？或者你需要更多信息吗？