固定位置和边距顶部的谷歌浏览器问题答案

【问题标题】：google chrome issue with fixed position and margin-top固定位置和边距顶部的谷歌浏览器问题
【发布时间】：2013-01-30 18:10:06
【问题描述】：

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

【问题讨论】：

标签： javascript jquery css html google-chrome

【解决方案1】：

试试这样的

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

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

【讨论】：