元素在其他浏览器中调整大小？
Elements resize in other browsers?
我正在一个网站 www.50s.co 上工作，它在 chrome 中看起来不错，但后来我在 firefox 或 IE 中查看，背景图片的大小不同，至少它看起来像他们是，但它说图像大小相同，所以页面上的某些元素导致了问题，但我看不出有什么问题。
我只希望网站在 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;
position:relative; clear:bottom;
display:block;margin-right:auto;margin-left:auto;" src="images/standards.jpg" />
</body>
</html>
Blockquote
您已将图像绝对定位为 "background" 图像（但在 img 标签中！）。这真的没有意义——绝对定位的元素不会自动调整它们的大小。
将图像定义为它们应该跨越的元素的真实背景图像：background: url(…) …具有您需要的大小、附件和重复设置。
我正在一个网站 www.50s.co 上工作，它在 chrome 中看起来不错，但后来我在 firefox 或 IE 中查看，背景图片的大小不同，至少它看起来像他们是，但它说图像大小相同，所以页面上的某些元素导致了问题，但我看不出有什么问题。
我只希望网站在 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;
position:relative; clear:bottom;
display:block;margin-right:auto;margin-left:auto;" src="images/standards.jpg" />
</body>
</html>
Blockquote
您已将图像绝对定位为 "background" 图像（但在 img 标签中！）。这真的没有意义——绝对定位的元素不会自动调整它们的大小。
将图像定义为它们应该跨越的元素的真实背景图像：background: url(…) …具有您需要的大小、附件和重复设置。