Question

我在移动浏览器上查看的页面（在Android JB和iOS 6上测试）在纵向和横向模式下初始加载时渲染效果很好。但是，当我从从风景到肖像时，绝对定位的div会偏离它们实际应该的位置。奇怪的是，如果我在改变方向时放大了这个问题，那么这个问题就不会出现了。

这与此处提到的问题相同：Strange offset in the CSS element position after changing orientation on iPad 唯一的区别是我在手机上测试。我尝试了那里提供的解决方案，但它们似乎没有用。

这是我的CSS

       html{
            width: 100%;
            height: 100%;
        }

        body{
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background: #000;
        }

        #container{
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            min-width: 960px;
            min-height: 544px;
        }

        #pic{
            display: table;
            height: 100%;
            width: auto;
            margin: 0 auto;
            z-index: 5;
        }

        #links{
            position: absolute;
            width: 100%;
            height: 50px;
            bottom: 5px;
            left: 0;
            right: 0;
            z-index: 9;
            background: #ccc;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
            filter: alpha(opacity=10);
            -moz-opacity: 0.1;
            -khtml-opacity: 0.1;                  
            opacity: 0.1;
        }

        #wrapper{
            position: absolute;
            width: 100%;
            height: 50px;
            bottom: 5px;
            left: 0;
            right: 0;
            z-index: 12;
        }

        #content{
            display: table;
            width: 100%;
            height: 100%;
            margin: 0 auto;
        }

        #content div{
            display: inline-block;
            *display: inline;
            zoom: 1;
            width: 20%;
            text-align: center;
        }

        #content div *{
            vertical-align: middle;
            border: 0;
            text-decoration: none;
            color: #000;
            border-radius: 5px;
        }

        /* portrait */
        @media screen and (orientation:portrait) {
            #container{
                position:relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            min-width: 960px;
            min-height: 544px;
            }
        }
        /* landscape */
        @media screen and (orientation:landscape) {
            #container{
                position:relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            min-width: 960px;
            min-height: 544px;
            }
        }

正如您所看到的，我已经尝试了另一个无法解决的问题的解决方案。我的HTML结构

<div id="container">
        <img src="pic_jj.jpg" alt="image" id="pic" />
        <div id="links">

        </div>
        <div id="wrapper">
            <div id="content">

                <div>
                </div>

                <div>
                </div>

                <div>
                </div>

                <div>
                </div>

                <div>
                </div>

            </div>
        </div>
    </div>

如果您需要现场演示，可以查看我的页面here。我应该提一下，我正在寻找一个非js解决方案。

PS。我正在使用这个元标记：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no;">

更新屏幕截图。

这是初始加载的样子（正常行为）

当我将方向从横向更改为纵向时会发生什么

Answer 1

正如我和WallaceSidhrée在上面的评论中所建议的那样，你应该通过使用更传统的做法来区别对待这个渲染问题。解决这些问题可能会使您的渲染奇怪无效。如果没有，它至少会使查找问题变得非常容易。以下是一些需要注意的事项：

- 你的样式表中有重复的样式（即不必要的@media查询）
你提到你添加了这些媒体查询，以表明你已经尝试过来自不同的SO问题的解决方案，但即使它使用错误的方法来修复问题，因为结果很可能是未定义的。理论上，额外的媒体查询不应该改变布局。

- 您使用<img>标记来显示背景，而不是background元素上更传统的<div>属性要实现与所需黑色背景的混合，您应同时使用背景图像和颜色。尝试background-color: #000000;与background-image: url(image.jpg)。背景图像始终堆叠在背景颜色之上。

- 您正在将display: table;应用于#pic元素，以尝试实现图像居中 您应该使用background-position: center;

将背景图像居中

- 您使用z-index元素上的#pic属性，但没有附带的位置属性设置
使用z-index要求将position属性设置为fixed，absolute或relative。 z-index对position: static;元素没有影响，如果没有明确定义，这是默认值。

- 您试图通过更改单独元素的不透明度属性而不是作为元素的背景颜色设置来实现背景透明度 你提到你已经这样做了，因为缺乏对rgba值的支持。但更传统的方法是做RaphaelDDL提出的建议并提供不包含alpha透明度的后备值。

我建议您简化HTML。它真的不应该采取比这更多的标记：

<body>
    <div id="image></div>
    <div id="flair">
        <div id="flair-container">
            <div class="flair"></div>
            <div class="flair"></div>
            <div class="flair"></div>
            <div class="flair"></div>
            <div class="flair"></div>
        </div>
    </div>
</body>

<强>更新

这是"FIDDLE"，考虑了我的建议。在iPad（iOS 6.1.3）和Nexus 7（Android 4.2.2）上进行测试时，我没有注意到任何旋转怪癖。

Answer 2

请参阅我的设计，并发现它可以响应浏览器的大小调整。如果可能，我要求您更改代码并在I pad或tab中测试它们。请尝试我猜它会导致最终结果。：）

<!DOCTYPE html>

Jeevan Jose

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no;">
    <meta name="description" content="Jeevan Jose | About | Twitter | LinkedIn | Facebook | Email">
    <meta name="keywords" content="Computer Engineer, Software Engineer, IT, Jeevan Jose, Jeevan, Photographer">
    <meta name="author" content="Jeevan Jose">
    <meta charset="UTF-8">

    <style type="text/css">
        html{
            width: 100%;
            height: 100%;
        }

        body{
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background: #000;
        }

        #container{
            position: relative;
            width: 100%;
            height: 90%;
            margin: 0;
            padding: 0;
            min-width: 100%;
            min-height: 90%;
        }

        #pic{
            display: table;
            height: 80%;
            width: 80%;
            margin: 0 auto;
            z-index: 5;
        }

        #links{
            position: absolute;
            width: 100%;
            height: 10%;
            bottom: 5px;
            left: 0;
            right: 0;
            z-index: 9;
            background: #ccc;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
            filter: alpha(opacity=10);
            -moz-opacity: 0.1;
            -khtml-opacity: 0.1;                  
            opacity: 0.1;
        }

        #wrapper{
            position: absolute;
            width: 100%;
            height: 10%;
            bottom: 5px;
            left: 0;
            right: 0;
            z-index: 12;
        }

        #content{
            display: table;
            width: 100%;
            height: 100%;
            margin: 0 auto;
        }

        #content div{
            display: inline-block;
            *display: inline;
            zoom: 1;
            width: 19%;
            text-align: center;
        }

        #content div *{
            vertical-align: middle;
            border: 0;
            text-decoration: none;
            color: #000;
            border-radius: 5px;
        }

        /* portrait */
        @media screen and (orientation:portrait) {
            #container{
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            min-width: 100%;
            min-height: 90%;
        }

        #pic{
            display: table;
            height: 80%;
            width: 80%;
            margin: 0 auto;
            z-index: 5;
        }

        #links{
            position: absolute;
            width: 100%;
            height: 10%;
            bottom: 5px;
            left: 0;
            right: 0;
            z-index: 9;
            background: #ccc;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
            filter: alpha(opacity=10);
            -moz-opacity: 0.1;
            -khtml-opacity: 0.1;                  
            opacity: 0.1;
        }

        #wrapper{
            position: absolute;
            width: 100%;
            height: 10%;
            bottom: 5px;
            left: 0;
            right: 0;
            z-index: 12;
        }
        }
        /* landscape */
        @media screen and (orientation:landscape) {
            #container{
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            min-width: 100%;
            min-height: 90%;
        }

        #pic{
            display: table;
            height: 80%;
            width: 80%;
            margin: 0 auto;
            z-index: 5;
        }

        #links{
            position: absolute;
            width: 100%;
            height: 10%;
            bottom: 5px;
            left: 0;
            right: 0;
            z-index: 9;
            background: #ccc;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
            filter: alpha(opacity=10);
            -moz-opacity: 0.1;
            -khtml-opacity: 0.1;                  
            opacity: 0.1;
        }

        #wrapper{
            position: absolute;
            width: 100%;
            height: 10%;
            bottom: 5px;
            left: 0;
            right: 0;
            z-index: 12;
        }
        }
    </style>
</head>
<body>
    <div id="container">
        <img src="http://jeevanjose.com/pic_jj.jpg" alt="image" id="pic" />
        <div id="links">

        </div>
        <div id="wrapper">
            <div id="content">

                <div>
                <!--Facebook Button-->
                <iframe src="https://www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2Fjosejeevan&amp;width=200&amp;height=21&amp;colorscheme=dark&amp;layout=button_count&amp;show_faces=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
                </div>

                <div>
                <!--Twitter handle-->
                <a href="https://twitter.com/jeevan_jose" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @jeevan_jose</a>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
                </div>

                <div>
                <!--LinkedIn badge-->
                <a href="http://uk.linkedin.com/in/josejeevan">      
                    <img src="http://www.linkedin.com/img/webpromo/btn_myprofile_160x33.png" width="160" height="33" border="0" alt="View Jeevan Jose's profile on LinkedIn">
                </a>
                </div>

                <div>
                <!--Stackoverflow Flair-->
                <a href="http://stackoverflow.com/users/2025666/jeevan-jose">
                    <img src="http://stackoverflow.com/users/flair/2025666.png?theme=dark" width="208" height="50" alt="SO Flair">
                </a>
                </div>

                <div>
                <!--Email Button-->
                <a href="mailto:contact@jeevanjose.com?subject=Reference%20-%20jeevanjose.com">
                    <img src="email_button.png" alt="email button" />
                </a>
                </div>

            </div>
        </div>
    </div>

    <!-- Start of StatCounter Code for Default Guide -->
    <script type="text/javascript">
    //<![CDATA[
    var sc_project=8629786; 
    var sc_invisible=1; 
    var sc_security="d00c7885"; 
    var scJsHost = (("https:" == document.location.protocol) ?
    "https://secure." : "http://www.");
    document.write("<sc"+"ript type='text/javascript' src='" +
    scJsHost+
    "statcounter.com/counter/counter_xhtml.js'></"+"script>");
    //]]>
    </script>
    <noscript><div class="statcounter"><a title="web statistics"
    href="http://statcounter.com/free-web-stats/"
    class="statcounter"><img class="statcounter"
    src="http://c.statcounter.com/8629786/0/d00c7885/1/"
    alt="web statistics" /></a></div></noscript>
    <!-- End of StatCounter Code for Default Guide -->

    <!--Google Analytics-->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-43825613-1', 'jeevanjose.com');
      ga('send', 'pageview');

    </script>
</body>

由于路径问题，某些图片可能无法显示，因为我在记事本中进行了更改，但请检查。：）

绝对元素在横向方向上偏移

2 个答案: