1

要素 #inner に .outerHeight(true) を設定しましたが、現時点では高さの値を返します

すなわち: 304 ff: 317 クローム: 289

誰かが私がこれで間違っているかもしれないことを説明できますか?

JS

var wH = $(window).height(),
    wrapper = $('#wrapper'),
    inner = $('#inner'),
    innerH = inner.outerHeight(true),
    more = inner.find('.more'),
    close = inner.find('.close'),
    titleH = $('#title').outerHeight(true),
    excerpt = $('.excerpt'),
    excerptH = excerpt.outerHeight(true),
    lowerH = $('.lower').outerHeight(true),
    upper = inner.find('.upper'),
    footerH = $('#footer').height()
    body = $('body');

// Set #wrapper off page
wrapper.css('bottom', -innerH);

// Store tier1 calculation as data attribute
wrapper.data('tier1', -innerH+titleH+footerH);
console.log(innerH);
//console.log(-innerH+titleH+footerH);
// Animate #wrapper above #footer
wrapper.delay(500).animate({ bottom: wrapper.data('tier1') }, 400);

CSS

body{font-family:Arial,Helvetica,sans-serif;overflow: hidden;}
h1{text-align:center;width:600px;margin:0 auto;padding:20px 0 45px;font-size:28px;font-weight:bold;line-height:26px;}
p{margin-bottom:20px;}


#tiers{background:#f2f2f2;height:100%;}
#wrapper{width:100%;position:absolute;bottom:0;left:0;background:#dedede;}
#inner{width:840px;margin:0 auto;}
.upper{display:none;}
.upper p{margin-bottom:0;}
.col{width:410px;}
.btn{background: #000000;color: #FFFFFF;display: block;font-size: 20px;font-weight: bold;width:30px;height:30px;text-align:center;line-height:30px;position: absolute;text-decoration: none;}
.more{top:20px;right:20px;}
.close{display:none;top:60px;right:20px;}
.excerpt{display: block;}

HTML

<body class="tier1">

  <div id="tiers">
      <div id="wrapper">
      <div id="inner" class="clearfix">
          <a href="#" class="close btn">-</a>
          <a href="#" class="more btn">+</a>
          <div class="lower">
            <h1 id="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
            <p class="excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="upper">
            <div class="col left"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
            <div class="col right"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
          </div>
      </div>
    </div>
  </div>
  <div id="footer"></div>




</body>

ページへのリンク: http://bit.ly/IA65Mb

カイル

4

1 に答える 1

0

私が見つけることができたいくつかの違いがあります：

  • pクロムmargin-bottomに伝播する20pxがあります。#innerこの機能の詳細は覚えていませんが、実際には正しい動作だと聞いたことがあると思います。クロームだけだと思います。例を見る
  • 何らかの理由#excerptで ff と chrome で高さが異なります - テキストのレンダリングにわずかな違いがあるのでしょうか?

ただし、最初の問題を修正すると、問題が解決すると思います。クロスブラウザーでまったく同じ結果を得るのはやり過ぎです。

于 2012-05-04T12:50:37.930 に答える