iOS Safari - 将位置元素置于视口之外

问题描述：

我想知道是否可以在iOS6中将视口外的元素置于position: absolute;之外。iOS Safari - 将位置元素置于视口之外

即使当我使用<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添加了水平滚动条，并包含了应该隐藏的元素的一部分。

答

是的，这就是，如果你使用的包装用overflow: hidden

这个例子显示了一个红色的长方形100x100px是位置50像素的视口的权利，不需对视，包括它。

创建一个容器#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 - 将位置元素置于视口之外

相关推荐