好的，我正在整理我的网站，但我在使用 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
</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/