我正在网站www.50s.co上工作，它在Chrome中看起来不错，但后来我在firefox或IE中查看，背景图片的大小不同，至少它看起来像它们但是它＆＃39 ; s说图像大小是相同的，所以页面上的一些元素引起了问题，但我看不出有什么问题。
我只是希望网站看起来像在其他浏览器中的Chrome上一样。
是什么原因导致图片与页面底部的蓝色边框重叠，我该如何解决？ （加入我们页面是主要问题，但其他人做了一点）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" type="image/x-icon" href="/images/450fav.jpg"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.carousel.js" type="text/javascript"></script>
<link href="jquery.carousel.css" rel="stylesheet" type="text/css" />
<meta name="keywords" content="discount, ariels, air conditioning, airport transfers, auto electricians, bathrooms, beauty salons, bedrooms, blinds, curtains, boilers, brake, clutch, builders, burglar alarms, car body repairs, car hire, carpenters, carpet cleaning, carpet fitting, central heating, chiropodists, chiropractors, cleaning services, domestic appliance repair, double glazing, drains, electricians, estate agents, exausts, fencing, garage doors, garages, garage services, gas, guttering, kitchens, landscaper, gardening, grass cutting, locksmith, locksmiths, mot, mots, painters, decoraters, paving, contractors, pest control, plasterers, plumbers, removal, romavals, storage, roofing, roofer, skip hire, tree surgeon, tree services, tyres, vets, wills, probate writting">
<link href="browsers.css" rel="stylesheet" type="text/css">
<script type="text/javascript" async="" src="ga.js"></script><script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link rel="stylesheet" href="bootstrap.min.css">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="jquery.min.js"> </script><style type="text/css"></style>
<script src="bootstrap.min.js"></script>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jquery.ui-1.10.4.slider.min.js" type="text/javascript"></script>
<link href="css" rel="stylesheet" type="text/css">
<link href="jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jquery.ui.slider.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
jQuery(document).ready(function($) {
/*$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},900);
});*/
$('#change_city').change(function(){
$.post( "ajax.php", { city_id: $(this).val() }, function( data ) {
$( "#change_postcode" ).html( data );
});
});
$( "#menu_toggle" ).click(function() {
$( "#top_menu" ).toggle();
});
});
</script>
<meta charset="utf-8">
<title>Join 450s</title>
</head>
<body>
<div class="border1"> </div>
<button type="button" class="navbar-toggle hidden-lg hidden-md hidden-sm" id="menu_toggle" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="logo">
<a href="http://50s.co"><br><img src="/images/450slogo.png"></a><br>
</div>
</div>
<div class="col-md-8 col-sm-12 col-xs-12">
<nav class="navbar navbar-default pull-right">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top_menu">
<ul class="nav navbar-nav">
<li><a class="active" href="http://www.50s.co" data-hover="Home">Home</a></li>
<li><a href="http://www.50s.co/why.php" data-hover="Why Us?">Why Us?</a></li>
<li><a href="http://www.50s.co/offers.php" data-hover="Offers">Offers</a></li>
<li><a style="color:#E31818" href="http://www.50s.co/advertise.php" data-hover="Advertise">Join Us</a></li>
<li><a href="http://www.50s.co/contact.php" data-hover="Contact Us">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
<div id="Slider1"></div>
</div>
<div class='border2'> </div>
<div style="position:relative;width:100%;"><img class="advertise1" style="position:absolute;width:100%;border-radius:0px;" src="images/advertise1.png"/></div>
<div><img class="advertise2" style="position:absolute;width:100%;border-radius:0px;" src="images/advertise2.png"/></div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-xs-12 col-md-6 box1">
<div class="box-wrap">
<h1 class="title1" style="font-family:'arial';text-align:center;margin-top:2%;">Join 450s</h1>
<h4 class="heading1" style="font-family:'arial';padding:0px;text-align:center;"><p>Reasons to offer a discount to people over 50:</p></h4>
<h4><ul type="circle">
<li>64.1 million people live in the United Kingdom.</li><br>
<li>43% or 21.6 million people in the UK are over 50 years old.</li><br>
<li>14,226 people turn 50 every week.</li><br>
<li>People over 50 control 80% of private wealth.</li><br>
<li>The 50 plus generation is the fastest growing group of internet users.</li><br>
<li>The number of 50 plus people using the internet has increased by 80% since 2002.</li><br>
<li>Not all people over 50 are wealthy.</li><br>
<li>Pensioners genuinely need such discounts from private businesses.</li><br>
<li>All online lead service providers are fee based, at an average of 35+ Pounds per lead,
which they sell 3 times over and put you in a price war with your competition.</li><br>
<li>We offer exclusive leads, all over 50 year olds</li><br>
<li>No price war, No Monthly fees</li><br>
<li>No Cost per Refferal, Direct contact with the client</li><br>
<li>No third party referrals, Payment options </li><br>
</ul></h4>
<h3 class="heading2" style="font-family:'arial';padding:5px;text-align:center;">Call Today for the Best Exclusive Leads in your area!</h3>
<strong><h2 class="heading1" style="font-family:'arial';text-align:center;">Call Now On: 0207 078 4229</h2></strong><br>
</div>
</div>
</div>
</div>
<div style='margin-top:3%;' class='border2'> </div>
<img style="
max-width: 100%;
height: auto;
width: auto\9;
position:relative; clear:bottom;
display:block;margin-right:auto;margin-left:auto;" src="images/standards.jpg" />
</body>
</html>
Blockquote
答案 0 :(得分：0)
您将图像绝对定位为“背景”图像（但在img标签中！）。这真的没有意义 - 绝对定位的元素不会自动调整它们的大小。
将图像定义为它们应该跨越的元素的真实背景图像：background: url(…) …，其中包含您需要的大小，附件和重复设置。