时间戳

首页 > 解决方案 > 为什么这个元素没有出现在 iPhone 上的所有浏览器中？

html - 为什么这个元素没有出现在 iPhone 上的所有浏览器中？

问题描述

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

在运行最新 iOS 的 iPhone 上的所有浏览器上，navbar-toggler 按钮不可见 - 但可以点击它应该所在的空间以显示侧边栏。如何让这个元素出现在手机上？

完整的代码可以在这里下载。我相信这是相关的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将添加显示类：

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

标签： htmlcssios

解决方案

您可以尝试overflow:visible在容器上进行设置，如下所示：

.tm-sidebar{
    overflow:visible;
}

也许这是由overflowonfixed元素的不同实现引起的。让我知道这是否有效。

推荐阅读