1

さて、私は自分のウェブサイトをまとめていますが、FireFox と Chrome に問題があります。問題は両方のブラウザで同じなので、簡単に修正できると思いますが、私は愚かです。

だから私は ajaxblender.com から bgStretcher を使用しています。IE9 ではすべてがうまく機能しますが、FireFox と Chrome でサイトを読み込むと、bgStretcher が読み込まれないか、正しく読み込まれません。バックグラウンドはバックグラウンドとして機能せず、div は一番下に押し込まれ、完全に動かなくなります。HTML コードは次のとおりです。

<script type="text/javascript">
$(document).ready(function(){

    //  Initialize Backgound Stretcher     
    $('body').bgStretcher({
        images: ['images/gervais_street.jpg'],
        imageWidth: 1024, 
        imageHeight: 720, 
    });

});

このセクションをコメントアウトすると、div は正しく機能しますが、明らかに背景がありません。誰かがこれで間違っていることを見ることができますか?

ページのコードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>gg web design</title>

<link rel="stylesheet" type="text/css" href="css/bgstretcher.css" />
<link rel="stylesheet" type="text/css" href="css/gg.css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/bgstretcher.js"></script>

</head>

<body>

<!-- from ajaxblender.com -->
<script type="text/javascript">
    $(document).ready(function(){

        //  Initialize Backgound Stretcher     
        $('body').bgStretcher({
            images: ['images/gervais_street.jpg'],
            imageWidth: 1024, 
            imageHeight: 720, 
        });

    });
</script>
<!-- end ajaxblender.com script -->

<script src="js/create_menu.js"></script>
<script>
    create_menu();
</script>

<div id="content">
    <center>
        welcome to G<span class="mirror">G</span> web design.
    </center>
</div>

<div id="picture_credit">
    gervais street bridge - photo by steve moore&nbsp;&nbsp;
</div>

<script src="js/create_footer.js"></script>
<script>
    create_footer();
</script>

</body>
</html>

私はおそらく愚かなことをしていることを知っているので、優しくしてください. みんな、ありがとう！

4

2 に答える 2

0

私が最初に試みることは、css をロードする順序を入れ替えることです。bgstretcher.css 呼び出しを最初ではなく最後に配置します。

考慮すべきもう 1 つの点は、最新のブラウザーで background-size:cover を使用することです。IE のバックグラウンドを処理するために、bgstretcher 呼び出し (js と css の両方) を IE 条件文に入れることができます。

ここにトピックに関する良いリンクがあります...

于 2013-05-13T02:27:14.370 に答える
0

本文の代わりにドキュメントを選択してください

$('document').bgStretcher({
    images: ['images/gervais_street.jpg'],
    imageWidth: 1024, 
    imageHeight: 720
});
于 2013-05-13T02:10:47.910 に答える