gpt4 book ai didi

html - iOS 不在右侧显示元素 : 0/float: right

转载 作者:塔克拉玛干 更新时间:2023-11-02 19:56:33 25 4
gpt4 key购买 nike

我在 iOS 设备上的汉堡导航图标遇到了一个非常奇怪的问题。在除 iOS 设备以外的所有设备上,菜单链接看起来都很好,但在 IOS 设备上,菜单链接要么完全在屏幕右侧,要么一半在屏幕上/一半在屏幕上。

我试过用float: rightposition: absolute right: 0 定位菜单链接,但我没有好运!

为了解决整个问题,当使用 BrowserStack 测试网站时,使用“真实的 iOS 设备”似乎没有显示问题。这和使用谷歌浏览器的 inspect element 的移动调试一样,问题没有显示。

我在使用最新的 iPad Mini 和同时使用 Chrome 浏览器和 Safari 的 iPhone 6 时发现了这个问题。

网站的显示方式:

Working example

如您所见,屏幕右上角的菜单链接显示正确。在 iOS 设备上,此菜单链接显示在右侧半个屏幕上/屏幕外,或完全在屏幕右侧。

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

Broken on 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com