Question

我在iOS设备上使用汉堡导航图标时遇到了一个非常奇怪的问题。在iOS设备以外的所有设备上，菜单链接似乎没问题，但在IOS设备上，菜单链接要么完全在屏幕右侧，要么在屏幕上显示半个半/半。

我尝试使用float: right和position: absolute right: 0定位菜单链接，但我没有运气！

要添加到整个问题，当使用BrowserStack测试网站时，使用“真正的iOS设备”问题似乎没有显示出来。使用Google Chrome的inspect元素的移动调试功能也是如此，问题没有显示出来。

使用最新的iPad Mini和使用Chrome浏览器和Safari的iPhone 6时，我看到了这个问题。

网站应如何显示：

如您所见，屏幕右上角的菜单链接正确显示。在iOS设备上，此菜单链接显示在屏幕右侧的一半开/关，或完全偏离屏幕右侧。

以下是它在iOS设备上的显示方式：

这是父元素的CSS：

.menu-bar {
    position: absolute;
    z-index: 5000;
    width: 100%;
}

这是关于实际元素的CSS：

a.menu-link {
    font-family: "nicholsmedium";
    color: #fff;
    text-decoration: none;
    font-size: 40px;
    margin-top: 45px;
    float: right;
    z-index: 3;
    display: block;
}

还有相关的HTML：

<body>  
    <div class="menu-bar">
        <a class="menu-link" href="#">
            <span class="open">A</span>
            <span class="close">D</span>
        </a>            
    </div>

Answer 1

您需要在元素上设置宽度和高度。 iOS设备往往不够智能，无法计算渲染后的宽度和高度，因此您会得到奇怪的位置，因为元素将在应用宽度之前定位。

iOS未在右侧显示元素：0 / float：right

1 个答案: