Question

我想知道是否可以在iOS6中将position: absolute;的元素放在视口之外。

即使我使用<meta name="viewport" content="width=640, maximum-scale=0.5, initial-scale=0.5, minimum-scale=0.5" />，如果元素的位置与right: 0; margin-right: -100px;（视口中的100px）相同，也会使视口的宽度更大。

iOS尝试在视口中包含此元素，这不是我想要的。我希望它部分可见并部分隐藏。 iOS添加了水平滚动条，并包含了一个应该隐藏的元素部分。

Answer 1

是的，如果您使用包含 overflow: hidden 的包装

此示例显示一个红色矩形100x100px，位于视口右侧50px位置，而不包含视口。

创建一个与视口右侧对齐的容器 #limit 。通过设置溢出来阻止内容放大视口。

<!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>

iOS Safari - 在视口外定位元素

1 个答案: