谷歌铬问题与固定位置和利润顶部

google chrome issue with fixed position and margin-top

本文关键字：顶部 位置 定位 问题 谷歌      更新时间：2023-09-26

Chrome中的有趣问题：

我的rails应用程序布局中有以下社交图标div：

<div class="social_media_icons">
  <ul>
    <li ><a href="http://www.youtube.com/" target="_blank"><img src="/images/yt.jpg" /></a></li>
    <li ><a href="http://www.facebook.com/" target="_blank"><img src="/images/fb.jpg" /></a></li>
    <li ><a href="https://twitter.com" target="_blank"><img src="/images/tw.jpg" /></a></li>
  </ul>
</div>

和相关的css：

.social_media_icons{
    float: left;
    position: fixed;
    margin-top: -69%;
}

我用@media查询在屏幕上移动。现在@media的宽度很好，但高度不太好。因此，当内容发生变化，页面高度变大或变小时，我有一个javascript函数，可以更改div:的页边空白顶部

$(document).ready(function(){
  if(document.documentElement.clientWidth >= 1101){
      if($(".container").height() > 600 && $(".container").height() < 1299){
          $(".social_media_icons").css("margin-top", "-115%"); //problem right here
      } else if($(".container").height() > 1300){
          $(".social_media_icons").css("margin-top", "-273%"); //problem right here
      } else if($(".container").height() <= 500){
          $(".social_media_icons").css("margin-top", "-45%");
      } else{
          $(".social_media_icons").css("margin-top", "-68%");
      }
  }
});

正如您所看到的，在注释行中的margin-top的值（分别为-115%和-273%）有点混乱！当然，这些值在FF或IE中根本不起作用。

问题：当页面上的内容变得比600px大时，为什么Chrome要求margin-top的%值如此荒谬？

事实上，为什么我必须更改margin-top的%？它不应该相对于fixed元素上的视图窗口吗？这意味着，设置margin-top的值一次，无论内容如何，都应该将其定位在完全相同的位置，因为view-port的高度永远不会改变。

尝试类似的东西

.social_media_icons{
float: left;
position: fixed;
top:0;
left:0;
}

http://www.w3.org/TR/CSS2/visuren.html#propdef-位置

相关文章：