Question

我试图阻止我网站上的溢出，即使我有动画外部的div。你可以在this link看到它。

我做了overflow-x:hidden overflow-y:hidden

在正文，html，页眉，页脚和云div上。 它在桌面浏览器上运行良好，但在移动设备上，您可以垂直和水平滚动。

为什么？我的代码中没有什么奇怪的。动画从-200px开始，到2000px（左）结束。

这是我的HTML：

> <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <meta name = "viewport" content = "width=device-width, height=device-height, minimum-scale=1, maximum-scale=1">
            <meta name = "apple-mobile-web-app-capable" content = "yes" /> 
            <link type="text/css" rel="stylesheet" href="css/normalize.css">
            <link type="text/css" rel="stylesheet" href="css/style.css">
        <title>Tweezers</title>
    </head>

    <body>

        <h2 class="tk-expo-sans-pro">we're working on our awesome website</h2>
        <img id="logo" src="img/logo.gif"/>
        <div class="land"></div>
        <div class="cloud1"></div>
        <div class="cloud2"></div>
        <div class="cloud3"></div>
        <footer>
            <h3 class="tk-expo-sans-pro">meanwhile you can reach us via:</h3>
            <a href="http://facebook.com/tweezers.co"><div class="icon-uniE600"></div></a>
            <div class="icon-uniE601"></div>
            <div class="icon-uniE602"></div>
            <div class="icon-uniE603"></div>
        </footer>
        <!---JS FILES-->
        <script type="text/javascript" src="//use.typekit.net/cxg8ost.js"></script>
        <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    </body>

</html>

我失踪了什么？谢谢，波阿斯。

Answer 1

您在哪个移动设备中检查您的页面以及在哪个浏览器中？

firefox 18 Android设备中存在类似问题。请参阅：http://jbkflex.wordpress.com/2013/04/04/css3-transformations-showing-content-outside-overflowhidden-region-in-firefoxandroid/

Answer 2

尝试在HTML页面中添加以下元标记

<meta name="viewport" content="width=device-width,height=device-height">

动画溢出不起作用

2 个答案: