iphone - iOS Safari - 将元素放置在视口(viewport)之外
<p><p>我想知道是否可以在 iOS6 的视口(viewport)之外使用 <code>position: absolute;</code> 定位元素。 </p>
<p>即使我使用 <code><meta name="viewport"content="width=640, maximum-scale=0.5, initial-scale=0.5, minimum-scale=0.5"/></code>如果元素以 <code>right: 0; 的方式定位，则视口(viewport)具有更大的宽度； margin-right: -100px;</code> (视口(viewport)外 100px)。 </p>
<p>iOS 试图在视口(viewport)中包含这个元素，这不是我想要的。我想让它部分可见和部分隐藏。 iOS 增加了水平滚动条，并包含了应该隐藏的元素部分。</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>是的，如果你使用带有 <strong><code>overflow: hidden</code></strong></p> 的包装器
<p>这个例子显示了一个 100x100px 的红色矩形，它位于视口(viewport)右侧 50px 的位置，但视口(viewport)不包括它。</p>
<p>创建一个与视口(viewport)右侧对齐的容器<strong><code>#limit</code></strong>。通过设置溢出防止内容放大视口(viewport)。</p>
<pre><code><!DOCTYPE html>
<html>
<head>
<style type="text/css">
#limit {
position: absolute;
top: 0px;
right: 0px;
width: 100px;
height: 100px;
overflow: hidden;
}
#offset {
position: absolute;
top: 0px;
right: -50px;
width: 100px;
height: 100px;
background: #f00;
}
</style>
</head>
<body>
<div id="limit">
<div id="offset">
Hello
</div>
</div>
</body>
</html>
</code></pre></p>
<p style="font-size: 20px;">关于iphone - iOS Safari - 将元素放置在视口(viewport)之外，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/15327519/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/15327519/
</a>
</p>
页:
[1]