好的,所以我整理了自己的网站,但遇到了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,
    });

});


当我将本节注释掉时,divs可以正常运行,但显然没有背景。谁能看到任何与此错误的东西?

这是页面的代码:

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


我知道我可能在做一些愚蠢的事情,所以要保持温柔。感谢大家!

最佳答案

我要尝试的第一件事是交换加载CSS的顺序。将bgstretcher.css调用放在最后而不是放在第一位。

要考虑的另一件事是针对现代浏览器使用background-size:cover。您可以将bgstretcher调用(js和css)都放在IE条件语句中,以处理IE的背景。

这是该主题的good link ...

关于javascript - bgStretcher在FireFox或Chrome中不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16513820/

10-09 14:24