为什么静态定位div从其位置向上移动? [英] Why does this static positioned div moves upward from its position?

查看:343
本文介绍了为什么静态定位div从其位置向上移动?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这在我的博客中似乎是一个非常令人沮丧的问题。我只能在Chrome(60+)中重现。显示标题和内容的主div( .columns.fauxcolumns )从顶部裁剪 。基本上它是隐藏的( overflow:hidden 在那里),它从它的正常位置向上10-20个像素;流出 .columns.fauxcolumns ,即使它( .colums-inner )也是静态的。



如何检查/重新制作:


  1. 请访问

    解决方案

    我发现问题是加载类在页面加载后没有被删除。这与JavaScript有关。正确的应该是脚本应该自动从< body> 中移除 loading 类。由于这是演示文稿中的一个展示器,因此可以使用以下CSS进行修改:

      .loading .main-inner .columns.fauxcolumns {
    overflow:visible;
    }


    This seems a very frustrating issue in my blog. I can reproduce it only in Chrome (60+). The main div (.columns.fauxcolumns) where the header and content are displayed is cropped from the top. Basically it's hidden (overflow:hidden is there) and somehow it is 10-20 pixels upwards from its normal position; flows out of .columns.fauxcolumns, even it (.colums-inner) is static.

    How to inspect / re-produce:

    1. Please visit https://sourcewing.blogspot.in/search/label/articles
    2. Control + Click on MORE in the first article (to open in new tab)
    3. Before the page is loaded fully in the tab that you've just opened, click on the tab and DON'T SCROLL the page. SCROLL UP ONLY WHEN PAGE IS FULLY LOADED.
    4. When you'll scroll up, you'll probably find the issue.

    You might not find it with just one try as it's produced in this scenario only.

    Why is it happening? I know we can somehow fix it but I believe it's not a normal issue as it is observed only in Chrome.

    The following screenshot might help:

    Note: November 28, 2015 is cropped in screenshot.

    解决方案

    I found the issue being the loading class not been removed after the page has loaded. This is something to do with JavaScript. The correct one should be the script should automatically remove the loading class from <body>. Since this being a show-stopper in the presentation, it can be kinda fixed using the following CSS:

    .loading .main-inner .columns.fauxcolumns {
      overflow: visible;
    }
    

    这篇关于为什么静态定位div从其位置向上移动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆