2

Chrome のファンキーな問題:

divRailsアプリのレイアウトにこのソーシャルアイコンがあります：

<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ですか?

実際、なぜ % ofmargin-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 に答える