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

【问题标题】：iOS not showing element on right: 0/float: rightiOS 未在右侧显示元素：0/float: right
【发布时间】：2015-11-10 11:16:14
【问题描述】：

iOS 设备上的汉堡导航图标有一个非常奇怪的问题。在 iOS 设备以外的所有设备上，菜单链接似乎都很好，但在 IOS 设备上，菜单链接要么完全不在屏幕右侧，要么在屏幕上的一半。

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

添加到整个问题，当使用 BrowserStack 测试网站时，使用“真正的 iOS 设备”似乎没有显示问题。使用谷歌浏览器的检查元素的移动调试东西也是如此，问题不显示。

我在使用最新的 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>

【问题讨论】：

请在您的问题中发布相关的 HTML

标签： html ios css

【解决方案1】：

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

【讨论】：

这解决了这个问题。我为a.menu-link 添加了一个固定的宽度和高度，这似乎已经成功了。