html - iOS 未在右侧显示元素 : 0/float: right
<p><p>iOS 设备上的汉堡导航图标有一个非常奇怪的问题。在 iOS 设备以外的所有设备上，菜单链接似乎都很好，但在 IOS 设备上，菜单链接要么完全不在屏幕右侧，要么在屏幕上的一半。</p>
<p>我试过用 <code>float: right</code> 和 <code>position: absolute</code> <code>right: 0</code> 定位菜单链接，但我没有好运!</p>
<p>添加到整个问题，当使用 BrowserStack 测试网站时，使用“真正的 iOS 设备”似乎没有显示问题。使用谷歌浏览器的检查元素的移动调试东西也是如此，问题不显示。</p>
<p>我在使用最新的 iPad Mini 和同时使用 Chrome 浏览器和 Safari 的 iPhone 6 时发现了这个问题。</p>
<p><strong>网站应该如何显示:</strong></p>
<p> <a href="/image/dzwCU.jpg" rel="noreferrer noopener nofollow"><img src="/image/dzwCU.jpg" alt="Working example"/></a> </p>
<p>如您所见，屏幕右上角的菜单链接显示正确。在 iOS 设备上，此菜单链接出现在屏幕右侧的半屏或半屏之外，或完全在右侧的屏幕外。</p>
<p><strong>它在 iOS 设备上的显示方式如下:</strong></p>
<p> <a href="/image/HrqPC.jpg" rel="noreferrer noopener nofollow"><img src="/image/HrqPC.jpg" alt="Broken on iOS"/></a> </p>
<p>这是父元素的 CSS:</p>
<pre><code>.menu-bar {
position: absolute;
z-index: 5000;
width: 100%;
}
</code></pre>
<p>这是关于实际元素的 CSS:</p>
<pre><code>a.menu-link {
font-family: "nicholsmedium";
color: #fff;
text-decoration: none;
font-size: 40px;
margin-top: 45px;
float: right;
z-index: 3;
display: block;
}
</code></pre>
<p>还有相关的 HTML:</p>
<pre><code><body>
<div class="menu-bar">
<a class="menu-link" href="#">
<span class="open">A</span>
<span class="close">D</span>
</a>
</div>
</code></pre></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>您需要在元素上设置宽度和高度。 iOS 设备往往不够智能，无法计算出渲染后的宽度和高度，因此您会得到奇怪的位置，因为元素会在应用宽度之前定位。</p></p>
<p style="font-size: 20px;">关于html - iOS 未在右侧显示元素 : 0/float: right，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/33628730/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/33628730/
</a>
</p>
页:
[1]