2

Chrome中的时髦问题：

div我的 Rails 应用程序布局中有这个社交图标：

<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高度永远不会改变。

4

1 回答 1

2

尝试这样的事情

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

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

于 2013-02-14T20:39:43.227 回答