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>
您需要在元素上设置宽度和高度。 iOS 设备往往不够智能，无法计算出渲染后的宽度和高度，因此您会得到奇怪的位置，因为元素会在应用宽度之前定位。
关于html - iOS 未在右侧显示元素 : 0/float: right，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33628730/
| 欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/) | Powered by Discuz! X3.4 |