0

Web サイトを持っていますが、最初の 2 ページで問題が発生しています。http://www.readysetpixel.net/about.htmlおよびhttp://www.readysetpixel.net/faq.html

コンテンツのパディングは 20px に設定されており、ブラウザのサイズが 800px に変更されたときに設定すると、以下に示すようにコンテンツの最大高さが 490px に切り替わります。

<script type="text/javascript">
$(document).ready(function() {
   $(window).on('resize', function(){
     if ($(this).height() <= 800){
      $('.content').css('max-height', '490px'); //sets max-height
     } else{
  $('.content').css('max-height', ''); //deletes max-height
   }
 }).resize()
})
</script>

これはすべて Google Chrome では正常に機能しますが、Firefox と IE では何らかの理由で下部のパディングを無視します。追加してみました

  $('.pad').css('padding-bottom', '20px'); //sets padding

そして削除は最大高さと同じ方法であり、それは機能しますが、サイズ変更時にGoogleに余分な20pxのパディングを与えます.

どんな助けでも大歓迎です。

更新しました：

sayhello とコンテスト ページは同じことをしていました。何らかの理由でフォームでパディングを使用すると、Firefox、IE、およびクロムで正しく読み取られます。前の 2 ページで同じことを行うと、クロムに余分な 20 ピクセルのパディングが与えられるため、これは奇妙です。

4

1 に答える 1

0

margin-bottom が高さの計算に追加されていないため、これはレンダリングのバグだと思います ( FF & IE Render Bug Article )。ブラウザ間で症状を修正することはそれほど難しくありません。高さの計算を下のレイヤー (スクロール レイヤーの外) に移動するだけです。

<div class="scroll">
    <div class="content">
        <h1>...</h1>
        <div>...</div>
    </div>
</div>

が& ;.scrollの責任を負う場所 は&の責任を負います。最も洗練されたソリューションではありませんが、クロス ブラウザーの問題を解決します。heightoverflow.contentwidthpadding

フィドラーをセットアップしたい場合は、お知らせください。

無関係な補足事項: CSS を調べた後、あなたのサイトはいくつかの OOCSS アプローチの恩恵を受ける可能性があります (そのようなことを心配している場合は、css ファイルのサイズを確実に削減してください)。

于 2012-08-19T15:58:35.427 に答える