固定位置和保证金顶部的谷歌铬问题
Chrome中的时髦问题：
我在rails应用程序的布局中有这个social-icons div ：
和相关的CSS：
.social_media_icons{ float: left; position: fixed; margin-top: -69%; }
我正在使用@media查询在屏幕上移动。 现在@media的宽度很好但高度不太好。 因此，当内容更改并且页面高度变大或变小时，我有一个javascript函数可以更改div的margin-top：
$(document).ready(function(){ if(document.documentElement.clientWidth >= 1101){ if($(".container").height() > 600 && $(".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; }