谷歌铬的问题与固定的位置和边缘顶部 [英] google chrome issue with fixed position and margin-top

问题描述

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>< a href =http://www.facebook.com/target =_ blank>< img src =/ images / fb.jpg/>< ; / A>< /锂> 
< li>< a href =https://twitter.comtarget =_ blank>< img src =/ images / tw.jpg/>< / a> ;< /锂> 
< / ul> 
< / div> 
  

和相关的css：

  .social_media_icons {
 float：left; 
位置：固定; 
 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 （。container）。height（）> 1300）{
 $（。social_media_icons）; //问题在这里
} else if ）.css（margin-top，-273％）; //问题在这里
} else if（$（。container）。height（）<= 500）{
ss（。social_media_icons）.css（margin-top，-45％）; 
} else {
 $（。social_media_icons）.css（margin-top ，-68％）; 
} 
} 
}）; 
  

您可以看到 margin-top -115％和 -273％）有点混乱！当然这些值在FF或IE中完全不起作用。

问题：为什么Chrome需要使用<％c $ c> margin-top 当页面上的内容变大时， 600px ？

实际上，为什么我必须根本改变 margin-top 的百分比？它不应该是相对于固定元素上的视图窗口吗？这意味着将 margin-top 的值设置为一次，应将其置于完全相同的位置，无论内容如何，​​因为 view-port height永远不会改变。

解决方案

尝试类似这样的操作

  .social_media_icons {
 float：left; 
位置：固定; 
 top：0; 
剩下：0; 
} 
  

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

Funky problem in Chrome:

I have this social-icons div in the layout of my rails app:

<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>

And relevent css:

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

That I am moving around the screen with @media queries. Now the @media works fine for width but not so good for height. So when the content changes and the height of page gets larger or smaller I have a javascript function that changes the margin-top of the 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%");
      }
  }
});

As you can see the values for the margin-top, on the commented lines, (-115% and -273% respectively) are a little messed up! And of course those values don't work at all in FF or IE.

Question: Why is Chrome requiring such absurd values for the % of margin-top when the content on the page gets any larger then 600px?

In fact why am I having to change the % of margin-top at all? Shouldn't it be relative to the view window on a fixed element? Which would mean that setting the value of margin-top once, should position it in the exact same place no matter the content because the view-port height never changes.

解决方案

try something like this

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

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

这篇关于谷歌铬的问题与固定的位置和边缘顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！