Question

Chrome中的时髦问题：

我在rails app的布局中有这个社交图标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中根本不起作用。

问题：当页面上的内容大于margin-top时，为什么Chrome需要600px％的荒谬值？

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

Answer 1

尝试这样的事情

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

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

固定位置和保证金顶部的谷歌铬问题

1 个答案: